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内 容 简 介 

本 书 通过 理论 讲解 和 案例 分 析 ， 详 细 介绍 了 初级 UI 设计 师 必 须 掌 握 的 基础 知识 ， 分 享 
了 作者 在 工作 中 的 实践 经 验 。 第 1 章 “ 移 动 端 组 件 的 认识 与 运用 ”主要 介绍 常用 组 件 的 特 
性 及 使 用 场景 :第 2 章 “ 能 力 效率 提升 ”主要 针对 日 常 工作 、 学 习 中 遇 到 的 问题 和 瓶颈 ， 
分 享 相关 的 解决 方案 ; 第 3 章 “ 设 计 理 论 与 实践 ” 主要 介绍 一 些 设计 领域 内 实用 的 理论 知识 ， 
帮助 大 家 理解 优秀 设计 的 内 部 规律 ; 第 4 章 “ 工 作 困 惑 ”针对 UI 设计 师 在 不 同 工 作 阶段 遇 
到 的 困惑 ， 提 出 具体 可 操作 的 建议 。 

本 书 适合 UI 设计 领域 从 业者 、 爱 好 者 阅读 ， 也 适合 平面 设计 、 网 页 设计 等 相关 专业 的 
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推荐 序 


当 你 正式 踏 上 用 户 体验 设计 这 条 路 的 时 候 ， 你 面前 就 会 有 两 大 障碍 : 一 ， 面 对 产 
品 经 理 给 的 原型 图 ， 无 从 下 手 ， 彻 彻底 底 地 变 成 一 个 美化 工作 者 ， 导 致 工作 质量 和 效 
率 一 直 无 法 提升 ， 在 团队 面前 没有 任何 话语 权 ; 二 ， 面 对 各 种 各 样 的 理论 、 原 则 、 规 
范 ， 疑 惑 到 底 哪个 才 是 最 重要 的 ? 应 该 如 何 去 把 它们 跟 实践 结合 起 来 ? 如 何 去 一 个 个 
攻破 它们 ? 以 往 设 计 知识 匮乏 ， 但 现在 的 设计 环境 已 经 变 了 ， 面 对 铺天盖地 的 经 验 和 
教程 ， 哪 些 才 是 真正 能 够 对 新 手 设计 师 有 帮助 的 呢 ? 


海盐 社 是 由 一 群 在 UI 中 国 非常 活跃 且 非 常 优秀 的 设计 师 组 成 的 团队 。 他 们 从 新 
手 设计 师 逐 渐 成 长 为 高 级 设计 师 ， 一 步 一 个 脚印 ， 基 于 自己 的 工作 经 验 积 累 和 外 文 基 
础 ， 发 布 了 大 量 的 原创 和 自 译文 章 ， 收 到 了 几 十 万 会 员 的 点 赞 和 收藏 。 


而 这 本 书 ， 就 是 他 们 在 实践 中 逐步 提炼 出 来 的 经 验 总 结 。 


我 相信 ， 他 们 是 一 群 最 了 解 新 手 设计 师 成 长 经 历 的 人 。 我 也 希望 ， 这 本 书 能 够 给 
新 手 设计 师 带 来 更 多 的 价值 ， 帮 助 新 手 设计 师 快 速 提升 自我 ! 


董 景 博 
UI 中 国 用 户 体 验 设 计 平 台 创始 人 、CEO 


Oe 


月 1 


中 


我 们 的 初衷 


随 着 移动 端的 变革 ，UI 设 计 行 业已 经 从 新 兴 期 逐步 进入 成 熟 期 ，UI 设 计 师 已 经 不 
再 是 稀缺 性 人 才 ， 行 业 门槛 也 变 得 越 来 越 高 。 有 幸 的 是 ，2016 年 我 们 在 “海盐 社 ” 相 
遇 。 初 期 我 们 只 是 想 提升 自己 对 知识 的 巩固 和 整理 能 力 ， 坚 持 着 每 周一 篇 文章 的 分 享 交 
流 。 然 而 我 们 惊喜 地 发 现 ， 我 们 的 分 享 被 越 来 越 多 的 人 关注 、 转 发 、 点 赞 。 这 让 我 们 可 
以 很 好 地 解答 每 个 读者 的 问题 ， 同 时 也 使 我 们 自身 对 知识 的 了 解 更 加 深入 ， 对 我 们 来 说 
这 是 意外 的 提升 。 通 过 不 断 收集 读者 反馈 我 们 发 现 ， 我 们 的 文章 可 以 帮助 到 一 些 刚 入 行 
的 UI 设计 师 。 将 自我 提升 的 分 享 优化 为 可 以 帮助 新 设计 师 的 经 验 总 结 ， 便 有 了 现在 的 
这 本 书 。 


我 们 的 亮点 

对 于 出 书 ， 我 们 初期 也 是 犹豫 再 三 ， 因 为 市 面 上 的 设计 类 书籍 以 大 厂 出 品 居多 ， 书 
中 的 内 容 也 十 分 优秀 ， 可 它们 对 于 部 分 初级 的 设计 师 来 说 ， 实 践 时 会 存在 很 多 的 阻碍 。 
所 以 我 们 觉得 ， 应 该 有 一 本 让 更 多 初级 设计 师 可 以 用 到 的 书 。 我 们 并 非 来 自 大 三， 相反 
都 是 在 创业 公司 中 混迹 的 设计 师 。 为 了 让 自己 不 断 提升 ， 我 们 努力 沉淀 着 经 验 ; 为 了 让 
初级 设计 师 少 走 弯 路 ， 我 们 把 曾经 碰 到 的 问题 逐个 道 来 ， 由 浅 入 深 地 和 大 家 讲 讲 UI 设 
计 那 些 事 儿 。 


本 书 的 结构 
第 1 章 “ 移 动 端 组 件 的 认识 与 运用 ”， 主 要 是 对 入 行 不 久 的 设计 师 做 一 个 基础 知识 
的 普及 ， 带 你 深入 理解 常用 组 件 的 特性 及 使 用 场景 ， 快 速 降低 错误 使 用 的 概率 。 


IV 
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第 2 章 “ 能 力 效 率 提 升 ”， 主 要 介绍 当 我 们 在 日 常 工作 、 学 习 中 遇 到 问题 和 瓶颈 
时 ， 可 以 通过 哪些 方法 来 解决 。 而 为 什么 相同 的 方法 ， 不 同 的 人 使 用 起 来 却 相 差 甚 远 ， 
我 们 也 会 对 这 个 问题 的 根源 进行 剖析 。 


第 3 章 “ 设 计 理 论 与 实践 ”， 主 要 介绍 设计 领域 实用 的 理论 知识 ， 帮 助 大 家 理解 
优秀 设计 的 内 部 规律 ， 让 你 在 展示 方案 时 更 具 说 服 力 。 


第 4 章 “ 工 作 困惑 ”， 针 对 设计 师 在 不 同 工 作 阶段 遇 到 的 困惑 ， 我 们 分 享 了 自己 的 
建议 。 对 照 我 们 的 建议 ， 结 合 自 身 的 经 历 去 思考 、 运 用 ， 相 信 你 能 有 进一步 的 收获 。 


参与 本 书 编写 的 作者 有 吴 博 、 付 铂 再、 姜 正 、 刘 芳 。 这 是 我 们 四 位 设计 师 第 一 次 写 
书 ， 我 们 基于 公众 号 中 的 精 选 文章 加 以 精 修 ， 无 论文 字 还 是 案例 都 会 是 全 新 的 体验 ， 希 
望 可 以 真正 帮助 大 家 在 设计 工作 中 解决 更 多 的 困难 。 
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01 搜索 


文 / 付 铂 更 


目前 ， 搜 索 是 每 个 应 用 产品 不 可 缺少 的 一 部 分 ， 同 时 也 是 用 户 经 常 使 用 的 功能 。 一 个 好 的 
搜索 设计 能 够 提高 转化 率 ， 提 升 用 户 体验 。 下 面 来 看 看 搜索 设计 的 一 些 套路 。 


搜索 入 口 的 设计 样式 


搜索 入 口 的 设计 与 搜索 功能 在 产品 中 的 位 置 密切 相关 ， 不 同 的 应 用 场景 所 使 用 的 搜索 入 口 
样式 也 是 不 同 的 ， 下 面 介绍 四 种 常用 的 搜索 入 口 样式 。 


1. 底部 标签 栏 入 口 


把 搜索 功能 作为 底部 标签 栏 中 的 一 个 功能 模块 ， 适 合 将 搜索 作为 重要 流量 入 口 的 App， 同 
时 也 可 以 与 其 他 的 功能 模块 入 口 相 结合 ， 如 下 图 所 示 : 


Q App Store 


App Store 布 卡 漫画 


“ 布 卡 漫画 ”就 是 把 搜索 和 其 他 小 的 功能 模块 入 口 相 结合 ， 如 热 榜 、VIP 专 区 等 。 底 部 搜 
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索 入 口 本 身 并 没有 搜索 功能 ， 因 此 常常 会 与 搜索 框 样式 相 结合 使 用 。 


2. 搜索 框 导航 入 口 

这 是 常见 的 展示 形式 之 一 ， 将 搜索 入 口 以 输入 框 的 形式 放置 在 导航 栏 中 或 者 导航 栏 下 方 ， 
有 些 应 用 即便 界面 向 上 滑动 时 ， 搜 索 框 仍 会 吸 项 显示 ， 方 便 用 户 随时 操作 ( 是 否 吸 顶 显示 
要 根据 搜索 功能 在 应 用 中 的 权重 而 定 ) ， 如 下 图 所 示 : 


花瓣 即刻 


搜索 框 导 航 入 口 除了 必须 要 有 的 输入 框 外 ， 还 需要 一 个 搜索 图 标 给 予 用 户 提示 。 目 前 很 多 
应 用 也 会 利用 搜索 框 内 的 区 域 显示 预 设 文案 ， 作 为 提示 用 户 的 关键 词 ， 也 可 以 作为 运营 的 
入 口 来 展示 。 


3. 搜索 图 标 入 口 

这 同样 也 是 常用 的 搜索 方式 ， 常 见 形式 是 将 一 个 放大 镜 的 图 标 放 在 导航 栏 的 右 侧 。 相 对 
上 面 提 到 的 搜索 框 ， 它 在 视觉 引导 上 上 略 逊 一 筹 ， 但 节省 了 导航 栏 的 空间 ， 让 导航 栏 可 以 
为 用 户 提供 更 多 的 功能 ， 适 用 于 搜索 权重 不 高 的 应 用 中 。 当 然 也 有 特别 的 搜索 图 标 方 
式 ， 例 如 自如 ， 同 样 是 搜索 图 标 ， 由 于 不 同 的 位 置 和 层级 变化 ， 入 口 变 得 更 加 突出 ， 如 
下 图 所 示 : 
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TIM 


4. 隐藏 的 搜索 入 口 

为 了 让 用 户 更 多 地 使 用 桌面 提供 的 快速 入 口 ， 一 些 设计 中 的 初始 界面 将 搜索 功能 隐藏 ， 滑 
动 界 面 时 才 会 出 现 搜 索 功 能 。 例 如 iPhone 手机 解锁 后 的 界面 是 各 个 应 用 入 口 ， 当 向 右 滑 
动 时 ， 隐 藏 的 搜索 入 口才 会 出 现 ， 如 下 图 所 示 : 
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搜索 方式 


搜索 方式 就 是 我 们 通常 会 用 哪些 方法 去 搜索 要 找 的 东西 ， 下 面 介 绍 三 种 常用 的 搜索 
方式 。 


1. 文字 搜索 


文字 搜索 是 主要 且 常 用 的 搜索 方法 ， 通 过 在 输入 框 中 输入 关键 字 进 行 精准 搜索 。 当 点 击 输 
入 框 时 ， 激 活 输入 键盘 ， 如 下 图 所 示 : 


i i TF 7 
你 好 取消 天 猪 精 灵 © 取消 
你 好 李 焕 英 未 副 减 版 章 锯 计 音 
你 好 邻居 坑 频 发 布 时 间 | 相关 性 
你 和 到 电子 行 业 的 大 一 为 和 能 
你 久居 
RE 网 时、 苏宁 合 作 再 加 深 ， 天 东 霄 灵 首 入 苏宁 
你 好 硫 子 电影 航 物 
人 好 中 国生 四 综 攻 
全 网 里 巴巴 发 布 天 筑 精 站 "太空 本 ” 
PR 

我 我 的 了 的 人 是 看 人 的 们 王子 属性 之 般 是 人 

qlwielritiyiuilop qiwielritiylulilop 
alsidlfliglhIjIklil alsldilflglh|jIk|li 


2. 语音 搜索 

语音 搜索 不 仅 提升 了 搜索 的 便利 性 ， 也 解决 了 老人 和 不 会 拼音 的 人 群 的 问题 。 另 外 ， 在 音 
乐 类 App 中 语音 搜索 功能 得 到 了 更 好 的 运用 ， 无 论 是 在 街 边 商场 还 是 酒吧 ， 当 我 们 听 
见 喜欢 的 歌曲 时 ， 可 以 用 语音 搜索 功能 进行 歌曲 识别 ， 随 时 找到 这 首 歌 曲 的 名 字 ， 如 下 
图 所 示 : 
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3. 图 像 搜 索 

借助 图 像 识 别 技术 ， 图 像 搜索 也 得 到 了 广泛 的 应 用 。 例 如 ， 我 们 可 以 通过 对 图 片 进行 拍照 
搜索 到 有 关 它 的 信息 或 者 是 和 它 相 似 的 图 片 ; 还 有 电 商 应 用 中 常用 到 的 ， 对 于 无 法 准确 描 
述 的 商品 ， 可 以 通过 图 像 搜 索 找到 该 物品 。 蘑 菇 街中 就 可 以 通过 对 现实 物体 拍照 来 找到 想 
要 的 物品 ， 如 下 图 所 示 : 


搜索 的 辅助 功能 
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基于 用 户 不 同 的 搜索 场景 ， 需 要 给 出 不 同 的 搜索 辅助 ， 一 个 好 的 搜索 辅助 ， 会 让 用 户 爱 上 
你 的 应 用 。 下 面 就 来 介绍 五 种 常用 的 搜索 辅助 功能 。 


1. 热门 搜索 


热门 搜索 常见 于 搜索 量 比较 大 或 者 运营 人 
户 更 多 的 选择 ， 如 下 图 所 示 : 
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2. 搜索 历史 


zljxicivibinim 


通过 搜索 历史 ， 用 户 可 以 看 到 自己 每 次 查找 的 记录 ， 方 便 再 次 查看 ， 如 下 图 所 示 : 
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3. 猜 你 喜欢 
猜 你 喜欢 根据 收集 的 用 户 记录 为 用 户 提供 相关 的 内 容 ， 减 少 用 户 的 思考 时 间 ， 同 时 也 为 用 
户 带 来 贴心 的 感觉 ， 如 下 图 所 示 : 


中国 联通 和 2040 @744%D 


< om 


于 文 华 高 强 。 ”站 水 泡 脚 有 ..、 。 油价 四 年 


加 衣柜 。 手机 。 四 件 笋 。 衬衣 tans neissiesil 
者 厅 休 。 口红 。 小 自居。 双语 包 
二 风扇 。 六 网。 行车 记 录 仅 。 光 划 水 洗 充 头 结账 17000 元 。。 退伍 军 扒 各 么 让 
和 机 训 。 牛仔 术 什么 血型 的 人 最 . 马 避 三 主 强 
香 担 住 襄 出 你 要 的 三 由 女生 和 遭 问 班 男孩 … 找 回 制 除 尊 片 
四 | 上 日 Ti © 3 DO 日 0T © 3 


有 符号 ABC DEF 外 行 号 ABC DEF 


GHI JKL MNO 


二 清空 
et 
1 PQRS TUV WXYZ ! PQRS TUV WXYZ 
@®@ 123 | 中 O23 | hh 


第 1 章 “移动 端 组 件 的 认识 与 运用 


4. 递 进 式 搜索 
递 进 式 搜索 通过 点 击 系统 提供 的 辅助 字段 ， 逐 渐 缩小 搜索 范围 ， 对 输入 模糊 关键 字 的 用 户 
也 提供 了 很 好 的 提示 ， 使 其 更 快 地 找到 目标 ， 如 下 图 所 示 : 
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5. 类 别 搜索 
当 应 用 中 涉及 搜索 内 容 的 信息 较 多 时 ， 可 以 添加 类 别 搜索 功能 ， 让 用 户 先 选择 类 别 ， 然 后 
再 进行 搜索 ， 可 以 更 快 更 精准 地 搜索 到 相关 内 容 ， 如 下 图 所 示 : 
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搜索 结果 展示 形式 


从 搜索 结果 来 看 ， 依 然 有 很 多 种 展示 形式 ， 如 文字 、 图 片 、 模 块 、 视 频 等 。 了 解 不 同样 式 
后 ， 可 以 根据 不 同 的 应 用 类 型 来 选择 合适 的 搜索 结果 的 展示 形式 。 


1. 文字 类 


文字 类 主要 以 文字 描述 展示 搜索 结果 ， 多 用 在 新 闻 类 、 音 乐 类 应 用 上 。 因 为 用 户 搜索 的 是 
关键 字 或 歌曲 本 身 的 名 字 ， 图 片 对 用 户 来 说 意义 并 不 大 ， 如 下 图 所 示 : 
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的 投 闹 。 展 开 了 伯 星 的 烧 铂 大 战 ， 滴 商 通 过 天 价 补 由 


2. 图 片 类 
图 片 类 主要 以 图 片 展示 为 主 ， 用 户 会 因为 看 到 感 兴趣 的 图 片 点 击 查 看 ， 所 以 多 用 在 购物 、 
资讯 、 电 影 等 应 用 中 ， 如 下 图 所 示 : 
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3. 模块 类 

模块 类 主要 用 于 包含 多 类 别 的 应 用 ， 例 如 在 得 到 App 上 进行 搜索 时 ， 输 入 “人 类 简 史 ”会 
发 现 有 两 个 类 别 ， 一 个 是 电子 书 ， 一 个 是 课程 。 所 以 对 于 多 类 别 的 应 用 ， 我 们 应 该 扩大 搜 
索 范围 并 分 类 别 展示 ， 让 用 户 可 以 通过 分 类 更 准确 地 查找 想 要 的 信息 ， 如 下 图 所 示 : 
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4. 视频 类 

下 面 要 说 的 比较 特殊 ， 通 常 只 有 在 视频 类 的 应 用 中 出 现 。 因 为 用 户 搜索 视频 的 目的 较为 明 
确 ， 同 时 搜索 出 的 结果 也 不 会 多 样 化 ， 所 以 在 此 界面 可 放 入 更 多 的 操作 按钮 方便 用 户 进行 
选择 观看 ， 如 下 图 所 示 : 
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(1 ) 搜索 入 口 的 设计 样式 : 搜索 入 口 的 设计 需要 根据 搜索 功能 在 产品 中 的 位 置 而 定 ， 不 
同 的 应 用 场景 所 使 用 的 搜索 入 口 样式 也 是 不 同 的 ， 常 用 的 四 种 为 : 底部 标签 栏 入 口 、 搜 索 
框 导 航 入 口 、 搜 索 图 标 入 口 、 隐 藏 的 搜索 入 口 。 


(2 ) 三 种 常用 的 搜索 方式 : 文字 搜索 、 语 音 搜索 、 图 像 搜索 。 
(3 ) 五 种 搜索 的 辅助 功能 : 热门 搜索 、 搜 索 历 史 、 猜 你 喜欢 、 递 进 式 搜索 、 类 别 搜索 。 
(4 ) 四 种 搜索 结果 展示 形式 : 文字 类 、 图 片 类 、 模 块 类 、 视 频 类 。 


通过 上 面 对 搜索 功能 的 分 析 可 知 ， 无 论 在 哪个 阶段 ， 都 要 对 应 用 本 身 的 适用 人 群 、 类 型 、 
功能 权重 等 进行 多 维度 分 析 ， 才 能 设计 出 更 合理 的 搜索 。 所 以 搜索 样式 的 本 身 没有 好 坏 之 
分 ， 在 不 同 的 场景 下 ， 选 择 最 合适 的 形式 才 会 提升 搜索 体验 ， 让 用 户 搜索 得 更 快 、 更 准 。 
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02 加 载 


文 / 付 铂 再 


加 载 的 作用 是 及 时 向 用 户 反 馈 当前 的 系统 状态 ， 缓 解 用 户 的 等 待 焦 虑 ， 以 提升 产品 的 用 户 
体验 。 但 设计 师 经 常会 忽略 加 载 界 面 的 重要 性 ， 其 实 不 同 的 加 载 对 缓解 用 户 焦虑 、 提 升 用 
户 体验 有 何不 同 ， 还 是 我 们 需要 深度 了 解 的 。 


什么 是 加 载 ? 
用 户 在 客户 端的 界面 上 进行 操作 ， 客 户 端 发 送 请 求 到 服务 器 ， 服 务 器 处 理 请 求 ， 返 回 数据 


并 显示 给 用 户 。 这 一 过 程 称 为 加 载 ， 简 单 说 就 是 用 户 与 产品 每 次 互动 时 的 等 待 时 间 。 还 要 
说 明 一 点 ， 加 载 和 缓存 是 有 区 别 的 ， 缓 存 是 主动 的 ， 加 载 为 被 动 的 。 


加 载 的 设计 样式 


1. 状态 栏 加 载 


状态 栏 加 载 是 系统 默认 的 配置 加 载 样式 。 通 常 在 网 络 不 好 时 ， 手 机 顶部 会 出 现 的 加 载 样式 
如 下 图 所 示 : 


状态 栏 加 载 


2. 导航 栏 加 载 
将 导航 栏 标题 临时 变 成 加 载 信息 的 文字 提醒 ， 当 收取 信息 时 标题 栏 展示 “收取 中 ”等 正在 
加 载 提 示 ， 加 载 成 功 则 提示 消失 ， 若 因为 网 络 错误 未 连接 服务 器 ， 则 在 标题 栏 显示 未 连接 
状态 ， 如 下 图 所 示 : 


14 UI 那些 事 儿 : 新 手 设计 师 的 成 长 之 路 


ll ET 中 上 午 10:26 100% ED; 
收取 中 + 仙人 (未 过 接 ) © 
打卡 小 Epik 
企业 微 信 微 信 


使 用 场景 : 多 用 于 社交 类 产品 ， 这 类 信息 的 收取 不 需要 获取 用 户 的 视觉 焦点 。 


3. 下 拉 刷 新 加 载 


下 拉 刷 新 已 经 在 App 中 被 普遍 应 用 ， 保 证 了 用 户 既 可 以 看 到 本 地 的 内 容 ， 也 可 以 选择 主动 下 
拉 对 当前 内 容 进行 更 新 ， 加 载 的 样式 也 可 以 做 出 进一步 的 设计 。 例 如 ， 美 团 就 运用 了 产品 形 
象 作为 刷新 的 样式 ， 增 加 了 品牌 形象 的 宣传 ， 使 得 加 载 过 程 更 加 情感 化 、 人 性 化 、 品 牌 化 。 
还 有 新 版 的 美 团 外 卖 加 入 了 红绿灯 的 小 动 效 ， 时 刻 提醒 人 们 红 灯 停 、 绿 灯 行 ， 如 下 图 所 示 : 


CR 
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使 用 场景 : 界面 信息 可 以 刷新 加 载 时 使 用 ， 多 用 于 含有 列表 的 界面 当中 。 


4. 上 拉 加 载 


这 是 最 常用 的 加 载 ， 当 用 户 想 查看 新 的 数据 时 ， 通 过 上 拉 界 面 自动 加 载 出 数据 的 过 程 称 为 上 
拉 加 载 。 上 拉 加 载 的 设计 样式 越 简单 越 好 ， 因 为 用 户 在 看 当前 界面 的 内 容 时 ， 下 面 未 显示 的 
部 分 内 容 已 加 载 完 毕 ， 加 载 提示 会 很 快 消失 ， 所 以 不 必 设计 过 于 复杂 的 样式 ， 如 下 图 所 示 : 


家 


美 团 外 卖 网 易 新 闻 


第 1 章 “移动 端 组 件 的 认识 与 运用 


使 用 场景 : 瀑布 流 、 列 表 等 情况 。 


5. 进度 条 加 载 
如 果 加 载 的 过 程 耗 时 较 长 ， 就 需要 用 进度 条 加 载 样式 来 告知 用 户 需要 等 待 的 时 间 进度 ， 让 
用 户 有 一 定 的 心理 准备 ， 如 下 图 所 示 : 
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使 用 场景 ， 多 见于 浏览 器 ， 包 括 PC 端 和 移动 端 浏 览 器 。App 中 的 页 面 如 果 是 用 H5 形 式 做 
的 ， 多 数 都 会 采用 进度 条 进行 加 载 。 


6. Toast 加 载 

当 用 户 执行 某 个 操作 时 ， 为 了 防止 用 户 继续 操作 导致 数据 加 载 失败 ， 则 用 Toast 的 样式 提 
示 正 在 加 载 ， 在 这 段 时 间 内 用 户 的 操作 将 受到 限制 。 这 种 情况 用 户 一 般 只 能 执行 返回 到 上 
一 级 的 操作 ， 其 他 都 被 禁用 ， 如 下 图 所 示 : 


无 aM 卡 全 Ts33 Stm 


飞 猪 天 猜 
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使 用 场景 : 关键 性 场景 中 ， 防 止 用 户 进行 多 余 的 操作 。 例 如 登录 、 注 册 、 提 交 信 息 、 支 
付 等 。 


7. 白 屏 加 载 

如 果 当 前 页 面 内 容 比 较 单一 ， 需 要 一 次 加 载 完成 才能 显示 ， 则 采用 白 屏 加 载 模式 。 这 种 加 
载 方式 在 完全 加 载 完成 之 前 是 看 不 到 任何 内 容 的 ， 所 以 一 旦 时 间 太 久 一 定 要 提示 用 户 是 什 
么 原因 加 载 失败 ( 可 以 配合 Toast 弹 窗 提示 ) ， 而 不 是 一 直 加 载 。 也 可 以 将 等 待 图 标 做 得 
更 有 趣味 性 ， 减 轻 用 户 的 等 待 焦虑 ， 如 下 图 所 示 : 
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使 用 场景 : 页面 跳 转 时 ， 用 白 屏 加 载 。 


8. 预 设 图 片 加 载 

加 载 时 ， 为 了 不 让 加 载 出 的 布局 显得 太空 ， 会 用 logo 或 者 预 设 图 片 来 填充 ， 加 深 用 户 对 品 
牌 的 认 知 。 大 家 或 许 会 有 这 样 的 疑问 ， 为 什么 同样 是 图 片 加 载 不 直接 用 展示 图 ， 而 先 用 预 
设 的 图 片 呢 ? 那 是 因为 预 设 图 通常 是 由 前 端 代码 写 的 ， 调 用 起 来 会 比较 快 ， 而 产品 图 是 需 
要 从 后 台数 据 库 调 用 的 ， 比 较 慢 。 再 有 就 是 为 了 提升 品牌 的 认 知 度 ， 如 下 图 所 示 : 
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使 用 场景 : 当 页 面 的 布局 固定 时 ， 常 采用 这 种 刷新 样式 ， 也 多 用 于 图 片 多 的 界面 。 


9. 色 块 加 载 

首先 我 们 要 知道 同样 大 小 的 色 块 加 载 要 比 图 片 快 很 多 ， 因 为 纯色 色 块 是 可 以 直接 用 代码 写 
出 来 的 ， 调 取 一 段 代 码 的 速度 比 调 取 一 张 图 片 的 速度 快 很 多 ， 所 以 在 图 片 刷新 的 过 程 中 ， 
将 未 加 载 出 来 的 内 容 区 域 用 色 块 填充 ， 在 加 载 过程 中 有 很 好 的 连贯 性 。 当 然 运 用 这 种 形式 
的 加 载 是 有 条 件 的 ， 需 要 内 容 框 架 是 固定 的 ， 如 下 图 所 示 : 


FF Gr 
am- 口 日 
a EE 
x we 
4 
有 a 
em em 
[al 


自如 花瓣 


经 


18 UI 那些 事 儿 : 新 手 设计 师 的 成 长 之 路 


使 用 场景 : 内 容 框 架 固定 的 前 提 下 使 用 。 


10. 模糊 加 载 

把 预 加 载 出 来 的 图 片 进行 高 斯 模糊 处 理 ， 通 常人 们 对 这 类 似 有 似 无 的 图 片 都 会 给 予 极 
大 的 耐心 去 等 待 ， 这 种 方案 成 功 引起 了 用 户 的 好 奇 心 ， 减 缓 了 用 户 的 等 待 焦虑 ， 如 下 
图 所 示 : 


Ts0a ~ @e+95%mDs 


使 用 场景 : 多 图 的 界面 中 。 


加 载 方式 


1. 预 加 载 

预 加 载 就 是 当 用 户 在 浏览 A 页 面 时 ， 加 载 并 未 停止 ， 而 是 在 悄悄 地 为 用 户 加 载 B 页 面 中 的 
内 容 ， 当 用 户 继续 看 B 页 面 时 就 体会 不 到 加 载 的 过 程 ， 用 户 不 存在 等 待 的 焦虑 问题 。 当 然 
凡事 有 利 必 有 次， 如 果 服 务 器 为 用 户 提 前 准备 了 将 要 看 的 内 容 ， 用 户 却 看 了 其 他 界面 或 者 
退出 了 ， 那 这 次 的 加 载 既 增加 了 服务 器 的 压力 ， 又 浪费 了 用 户 的 流量 。 
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2. 懒 加 载 


懒 加 载 和 预 加 载 刚 好 相反 ， 只 加 载 用 户 可 以 看 到 的 内 容 ， 其 他 内 容 需 要 用 户主 动 进行 操 
作 ， 向 服务 器 提供 需求 后 ， 才 会 自动 加 载 。 懒 加 载 通常 用 在 上 划 刷 新 和 下 拉 刷 新 上 。 懒 加 
载 的 速度 要 看 界面 中 内 容 的 多 少 以 及 图 片 的 大 小 ， 所 以 我 们 在 提供 图 片 时 都 会 进行 一 定 的 
压缩 ， 来 加 快 加 载 的 速度 。 


3. 智能 加 载 

根据 不 同 的 网 络 状况 选择 不 同 的 数据 加 载 ， 通 常用 在 3G/4G/Wi-Fi 可 切换 的 网 络 上 。 为 了 
既 让 用 户 使 用 流畅 ， 也 不 浪费 没 必要 的 流量 ， 当 Wi-Fi 条 件 下 ， 会 优先 选择 高 清 视频 或 者 
高 质量 的 音乐 进行 播放 ; 当 4G 条 件 下 ， 有 些 下 载 和 更 新 的 内 容 会 被 终止 ; 而 在 网 络 不 通 
的 时 候 ， 视 频 质 量 会 被 降 到 最 低 。 其 实 最 终 的 目的 就 是 为 了 保证 用 户 使 用 时 的 流畅 度 。 


4. 分 步 加 载 


当 界 面 中 图 文 同时 存在 时 ， 会 选择 优先 加 载 文字 ， 图 片 则 用 其 他 的 方式 占 位 ， 最 终 等 待 图 
片 加 载 完 成 。 分 步 加 载 的 好 处 是 在 等 待 加 载 的 时 间 里 用 户 可 以 看 到 相关 的 文字 内 容 ， 不 会 
像 白 屏 加 载 或 者 Toast 加 载 ， 用 户 只 能 默默 地 等 待 加 载 的 过 程 。 


画 重 点 
(1 ) 加 载 的 定义 : 用 户 在 客户 端的 界面 上 进行 操作 ， 客 户 端 发 送 请 求 到 服务 器 ， 服 务 器 
处 理 请 求 ， 返 回 数据 并 显示 给 用 户 。 这 一 过 程 称 之 为 加 载 。 


( 2 ) 加 载 的 设计 样式 : 状态 栏 加 载 、 导 航 栏 加 载 、 下 拉 刷 新 加 载 、 上 拉 加 载 、 进 度 条 加 
载 、Toast 加 载 、 白 屏 加 载 、 预 设 图 片 加 载 、 色 块 加 载 、 模 糊 加 载 。 


( 3 ) 加 载 方式 : 预 加 载 、 懒 加 载 、 智 能 加 载 、 分 步 加 载 。 


深入 了 解 加 载 的 样式 和 方式 后 ， 可 以 让 我 们 在 设计 和 交互 中 改善 那些 不 合理 的 加 载 ， 从 而 
提升 产品 的 舒适 度 ; 也 可 以 利用 加 载 来 做 更 多 的 设计 ， 让 加 载 变 得 更 有 趣味 性 ， 减 少 用 户 
因 等 待产 生 的 焦虑 感 。 
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03 金刚 区 


文 / 姜 正 


当 我 们 设计 首页 ， 考 虑 页 面 布局 细节 的 时 候 ， 可 能 最 让 人 头疼 就 是 金刚 区 的 图 标 设计 。 在 
设计 金刚 区 的 时 候 ， 很 多 设计 师 往往 不 知道 采取 哪 种 样式 能 够 更 好 地 服务 产品 ， 面 对 这 个 
头疼 的 问题 ， 我 们 结合 实际 上 线 产品 中 金刚 区 的 设计 进行 了 归纳 总 结 ， 分 析 它 们 的 设计 样 
式 以 及 优 缺 点 。 


金刚 区 的 定义 


金刚 区 是 指 页 面 项 部 banner 之 下 的 核心 功能 区 ， 它 会 根据 产品 业务 目标 的 变更 进行 调 
整 ， 就 像 百 变 金刚 一 样 灵活 ， 所 以 叫 作 金刚 区 。 人 金刚 区 多 以 排列 的 形式 展现 图 标 ， 一 般 情 
况 一 屏 展示 5~10 个 图 标 。 


第 1 章 移动 端 组 件 的 认识 与 运用 21 


金刚 区 的 作用 


金刚 区 服务 于 整体 产品 ， 属 于 页 面 的 核心 功能 区 ， 其 主要 作用 有 两 点 : 一 是 业务 导 流 ， 为 
不 同 的 业务 模块 进行 引流 ; 二 是 功能 选择 ， 为 用 户 提供 不 同 功能 的 服务 。 


功能 
选择 


金刚 区 的 设计 形式 和 优 缺 点 


金刚 区 的 设计 形式 一 般 是 由 “图 标 + 文字 ”组 成 。 我 们 以 线 上 实际 的 产品 为 例 ， 简 单 归 纳 
一 下 当前 主流 的 金刚 区 样式 。 


1. 面 性 图 标 


设计 样式 : 面 性 图 标 是 由 外 部 轮廓 和 内 部 图 形 组 成 ， 外 轮廓 的 图 形 一 般 选 用 圆 形 或 者 超 机 
圆 作 为 背景 图 形 ， 色 彩 上 多 会 选用 同类 色 处 理 成 微 渐变 的 形式 。 


辐 沟 折 购 全 有 好 人 
nN 明王 就 
区 可 全 肯 。 是 :站 9 电 
” Sa 2 2 


22 


UI 那些 事 儿 : 新 手 设计 师 的 成 长 之 路 


优点 : 外 轮廓 选用 了 圆 形 或 大 圆 角 的 图 形 ， 具 有 亲和力 ， 容 易 吸引 用 户 的 注意 力 ; 色彩 
饱满 具有 质感 ， 视 觉 冲 击 力 强 ; 内 部 图 形 与 外 轮廓 组 合 方式 多 样 化 ， 能 更 好 地 适应 业务 
变化 。 

缺点 : 对 于 相似 的 业务 ， 图 形 相似 ， 视 觉 辩 识 度 低 ; 对 于 复杂 的 业务 ， 图 形 无 法 明确 表 
达 ， 需 要 使 用 文字 代 蔡 图 形 ， 容 易 造成 金刚 区 设计 风格 不 统一 。 


2. 图 形 图 标 
设计 样式 : 独立 的 图 形 设计 ， 不 需要 外 轮廓 的 衬托 。 
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大 众 点 评 赶集 网 
优点 : 设计 细节 丰富 ， 处 理 样式 较 多 ， 例 如 渐变 、 图 案 纹理 等 ; 富有 创意 ， 能 营造 小 的 场 
景 插 画 ; 设计 样式 多 样 ， 如 扁平 化 、2.5D 等 设计 样式 。 
缺点 : 对 文字 信息 的 依赖 性 强 ; 图 形 、 色 彩 等 细节 容易 设计 过 度 ， 造 成 复杂 的 图 形 和 过 度 
弥散 效果 。 


3. 线性 图 标 
设计 样式 ， 主 要 利用 图 形 的 结构 线 进行 设计 ， 色 彩 上 基本 以 纯色 为 主 ， 或 者 添加 品牌 色 作 
为 辅助 色 。 
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优点 : 设计 上 简洁 干练 ， 不 易 干 扰 用 户 进行 其 他 操作 。 

缺点 : 在 内 容 复杂 的 页 面 中 视觉 冲击 力 较 弱 ; 相 比 于 面 性 图 标 色彩 较为 单调 。 


4. 线 面 结合 


设计 样式 : 在 图 形 化 的 基础 上 添加 轮廓 结构 线 ， 色 彩 上 简练 干净 ， 一 般 不 会 超过 三 种 
颜色 。 
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优点 : 轮廓 清晰 ， 视 觉 冲击 力 较 强 ; 设计 细节 丰富 ， 富 有 创意 。 


不 统一 ， 增 加 识别 


网 


缺点 : 视觉 层级 烦琐 ， 效 果 不 易 把 握 ; 视觉 效果 复杂 ， 不 够 简洁 ; 
难度 ， 较 为 依赖 文字 注释 。 


5. 实物 展示 
设计 样式 : 多 以 当前 主 营 业务 具有 代表 性 的 商品 为 例 ， 单 独 展示 或 者 配合 迹 曙 图 形 进行 
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优点 : 主题 明确 ， 简 单 直接 ; 使 用 商品 展示 ， 具 有 感染 力 。 


缺点 : 纯 商 品 图 片 展示 ， 缺 乏 设计 感 且 视觉 重量 不 易 把 控 和 统一 ; 商品 图 展示 ， 容 易 误导 
用 户 ， 让 用 户 感觉 只 是 单一 商品 的 售卖 ; 展示 立意 单一 ， 极 其 依赖 文字 注释 ; 如 果 频 繁 更 
换 商 品 图 ， 会 增加 用 户 对 于 金刚 区 模块 认 知 的 学 习 成 本 。 


6. 节日 主题 
设计 样式 ， 主要 以 当前 的 节日 文化 元 素 为 基础 进行 设计 ， 贴 合 节日 氛围 和 自身 的 品牌 
属性 。 
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优点 : 设计 风格 节日 气氛 浓重 ， 满 足 用 户 当前 的 情感 需求 ; 设计 细节 精致 ， 富 有 创意 ; 视觉 冲 
击 力 强 ; 视觉 上 与 当前 运营 主题 设计 风格 统一 ， 使 整个 界面 在 视觉 上 看 起 来 更 加 融合 。 


缺点 : 贴近 节日 活动 主题 的 图 形 设计 较为 复杂 ， 功 能 的 识别 性 较 弱 ; 由 于 图 形 设计 主要 以 泻 
染 气 氛 为 主 ， 所 以 图 标 极其 依赖 文字 注释 ; 时 效 性 强 ， 只 针对 节日 活动 前 后 的 时 间 阶 段 。 


7. 混合 搭配 


设计 样式 : 主要 以 图 标 和 图 片 为 主 进行 混合 排 布 ， 图 片 一 般 都 会 进行 图 形 遮 罩 处 理 ， 使 其 


与 其 他 图 标 在 视觉 上 相对 统一 。 


eeog@eeoe 


Er 


eegeoe 


学习 WEF AS A 


本 志向 咎 后 号 动 拉 天 987WR3.34 元 。 | 更 多 


撒 你 喜欢 STR 
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优点 : 能 够 有 效 帮 助 产品 推动 当前 的 运营 活动 点 击 率 。 

缺点 : 图 形 和 图 片 混搭 容易 造成 视觉 不 统一 ; 如 果 频 繁 更 换 运 营 活动 ， 增 加 了 用 户 的 学 习 
成 本 。 

8. 运营 文字 

设计 样式 : 以 运营 文案 为 主 ， 结 合 当前 的 活动 进行 主题 性 的 视觉 创意 设计 。 


都 呵 “ 旋 西红柿 的 五 条 森 忌 看 完 慎 理 看 
其 舌 渴 科 为 什么 人 会 不 自沉 地 拉 且 ?EE 


往 上 殷 %%3 
温和 让 | 


权 点， WF 


淘宝 苏宁 


优点 : 突出 当前 的 运营 活动 主题 ， 满 足 用 户 情感 化 的 设计 ; 运营 活动 的 针对 性 强 ， 能 够 直 
接 突 出 主题 ; 设计 风格 新 颖 ， 通 常 结合 当前 活动 主题 进行 创意 设计 ; 细节 丰富 ， 视 觉 冲 击 
力 强 。 


点 : 品类 功能 的 辨识 度 极 低 ， 对 底部 的 文案 依赖 性 强 ; 时 效 性 强 ， 只 限 用 于 当前 活动 
期 间 。 


如 何 选择 金刚 区 的 样式 


主流 的 金刚 区 图 标 设计 样式 分 为 两 种 : 线性 图 标 和 面 性 图 标 。 


第 1 章 “移动 端 组 件 的 认识 与 运用 27 


面 性 


图 标 


通过 归纳 总 结 ， 我 们 发 现 大 多 数 金 刚 区 的 属性 可 以 分 为 两 种 : 一 种 是 功能 性 的 金刚 区 ， 主 
要 以 展示 产品 的 核心 功能 为 主 ， 为 用 户 提供 功能 型 的 服务 ; 另 一 种 属于 业务 性 的 金刚 区 
主要 以 为 各 个 业务 导 流 为 主 。 


在 设计 工作 当中 ， 可 以 根据 实际 的 需求 选择 使 用 哪 种 设计 样式 。 在 这 里 我 们 需要 参考 所 设 
计 的 金刚 区 的 功能 类 型 和 功能 数量 两 个 参考 维度 。 如 果 产 品 是 功能 性 的 且 数 量 偏 多 ， 建 议 
使 用 线性 图 标 ， 因 为 线性 图 标 视觉 上 更 加 安静 沉稳 ， 不 会 过 多 地 干扰 用 户 ， 使 页 面 更 加 统 
一 整体 。 例 如 支付 宝 首页 的 金刚 区 的 功能 较 多 ， 选 用 线性 图 标 能 使 整个 模块 更 加 统一 ， 用 
户 可 以 根据 自己 的 需求 进行 点 击 。 


城市 服务 。。 我 的 快 迁 。。 共享 站 车 更 多 


* 主人 ， 有 人 撞 你 的 迄 - 16 小 时 前 

7 。 你 的 步 数 排行 榜 更 新 了 色 小 时 间 
从 到 入 积分 。 人 mtg 
© 号 加 1 


支付 宝 


如 果 是 业务 性 的 产品 则 更 加 适用 于 面 性 图 标 ， 因 为 面 性 图 标 视 觉 冲 击 力 强 ， 能 够 快速 引导 
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用 户 点 击 ， 完 成 业务 导 流 的 作用 。 常 见 的 使 用 场景 有 淘宝 、 京 东 等 电 商 平台 。 


我 的 频道 


OOOOV 
SOO00OE 
ee -一 = 
ps 四 下 

鹿 针 头条 WW 所 谓 的 潭 人 部 世 到 不 了 这 个 品牌， 你 
© Wie 全 有 打 代 

a 

a 

淘宝 


淘宝 、 京 东 等 电 商 平台 资源 品类 丰富 ， 金 刚 区 需要 担任 为 其 他 业务 导 流 的 作用 ， 选 择 视觉 
冲击 力 较 强 的 面 形 图 标 能 够 更 好 地 吸引 用 户 的 注意 力 ， 引 导 用 户 点 击 选择 。 


画 重 点 


(1 ) 金刚 区 是 页 面 的 核心 功能 区 ， 会 根据 产品 业务 目标 的 变更 进行 灵活 调整 。 


(2 ) 金刚 区 的 主要 作用 是 为 产品 的 主 营 业务 导 流 和 辅助 运营 ， 以 及 为 用 户 提供 核心 的 功 
能 服务 。 


( 3 ) 在 选用 金刚 区 设计 样式 的 时 候 ， 我 们 主要 参考 的 是 功能 类 型 和 功能 数量 两 个 维度 ， 
产品 偏重 功能 性 且 数 量 多 的 时 候 更 适用 线性 图 标 ， 产 品 偏重 业务 性 的 话 更 适用 面 性 图 标 。 


参考 资料 


金刚 区 ， 瓷 片区 的 叫 法 是 怎么 来 的 ? ”https://dwz.cn/kYrJejYF 
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04 表单 


文 / 付 铂 再 


用 App 时 每 次 遇 到 填写 表单 都 会 是 一 件 头疼 的 事情 ， 所 以 作为 设计 师 ， 每 次 设计 表单 界面 
时 也 不 可 以 忽略 它 的 重要 性 。 通 过 了 解 表单 的 基本 组 件 样式 和 使 用 场景 ， 将 其 运用 到 设计 
当中 ， 在 不 同 的 情境 下 使 用 最 合理 的 组 件 来 搭建 表单 ， 可 以 让 表单 填写 变 得 更 轻松 。 


表单 中 的 内 容 有 很 多 ， 例 如 复 选 框 、 单 选 框 、 输 入 框 、 下 拉 选 择 、 开 关 、 分 段 控件 等 元 
素 。 表 单 对 于 用 户 而 言 是 数据 的 录入 和 提交 界面 ;对 于 网 站 而 言 是 获取 用 户 信息 的 途径 。 
表单 可 以 帮助 我 们 通过 采集 更 多 的 用 户 信息 来 给 用 户 提 供 更 贴心 的 服务 。 


移动 端 表单 中 的 基本 组 件 及 使 用 场景 


正确 设计 表单 的 前 提 则 是 了 解 表 单 中 常用 的 组 件 以 及 它们 的 特性 ， 以 及 在 不 同 场景 下 如 何 
选择 表单 组 件 。 这 里 再 次 强调 下 ， 下 文 的 组 件 讲 的 都 是 在 表单 中 的 运用 。 


1. 输入 框 


这 是 接受 用 户主 动 输入 文本 的 区 域 ， 当 用 户主 动 点 击 输入 区 域 时 ， 会 唤起 键盘 。 输 入 完 
毕 后 ， 点 击 键盘 的 确认 键 ， 应 用 会 自动 根据 输入 的 信息 显示 对 应 的 内 容 ， 如 下 图 所 示 : 
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当然 ， 相 比 那 些 只 需要 点 击 或 者 滑动 的 组 件 来 说 ， 输 入 框 对 用 户 来 说 操作 成 本 较 高 ， 所 以 
我 们 在 选择 用 输入 框 时 ， 应 该 考虑 是 否 还 有 其 他 方式 能 减少 用 户 的 操作 成 本 ， 例 如 下 拉 菜 
单 ， 可 以 直接 选择 其 中 的 内 容 。 


Boao Baa 
a 0418358 ” 104183589 
AE 1798222 
@ 2707 
10483 
san Pa eee npg 
QQ 下 拉 选 择 


2. 分 段 控 件 
分 段 控件 来 源 于 iOS 规 范 ， 通 常 在 单 选项 为 2 ~ 5 个 的 场景 下 使 用 ， 如 下 图 所 示 : 


网 易 有 钱 效 鱼 记 账 
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在 界面 中 分 段 控件 起 到 分 割 和 筛选 同类 数据 的 作用 。 另 外 ， 它 可 以 把 所 有 的 选项 都 呈现 给 
用 户 ， 用 户 可 以 快速 地 做 出 选择 。 交 互 部 分 需要 注意 的 是 ， 分 段 控件 只 能 通过 点 击 控件 本 
身 的 分 段 来 进行 操作 ， 不 可 横 滑 切 换 。 


3. 状态 切换 器 


状态 切换 器 又 称 开关 ， 是 仿照 真实 的 开关 理念 而 设计 的 。 选 择 开 关 的 前 提 是 需要 两 种 简单 
且 直 接 对 立 的 选项 。 例 如 “ 开 ” 和 “ 关 ”，“ 显 示 ” 和 “隐藏 ”， 如 下 图 所 示 : 


大 要 发 


基本 在 入 住 完 成 10 天 内 补 宇 信息 


美 团 外 卖 小 猪 短 租 
使 用 状态 切换 器 的 项 目 通常 重要 性 相对 较 低 ， 都 是 附加 功能 ， 不 会 影响 表单 的 提交 流程 。 


4. 滑动 控制 器 


当 表 单 中 存在 选择 一 个 值 或 一 个 范围 时 ， 可 以 舍弃 复杂 的 下 拉 菜 单 或 者 系统 默认 的 选择 控 
件 改 用 滑动 控制 器 。 既 减少 用 户 的 操作 ， 又 增加 界面 的 设计 感 ， 如 下 图 所 示 : 


掌上 生活 民生 信用 卡 
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滑动 控制 器 在 表单 中 多 用 于 调整 额度 ， 相 对 输入 和 步 进 器 来 说 更 加 方便 ， 但 占据 界面 中 的 
空间 比较 大 。 当 然 其 他 产品 中 也 有 用 到 滑动 控制 器 的 ， 不 过 都 不 是 在 表单 中 的 运用 ， 这 里 
就 不 一 一 列举 了 。 


5. 数字 步 进 器 

可 以 被 用 在 只 能 递增 /递减 其 数量 的 选项 上 ， 以 便 让 用 户 能 快捷 地 微调 数值 。 使 用 步 进 
设计 代替 下 拉 列 表 ， 既 可 以 降低 操作 失误 率 ， 也 能 在 一 定 程度 上 减少 点 击 次数 ， 如 下 
图 所 示 : 


4 Mr wa. re ps 
会 计 : Y26.70 


西红柿 鸡蛋 差 饭 W72 “< 


多 点 美 团 外 卖 


步 进 器 在 产品 中 经 常 出 现在 购物 列表 中 ， 相 比 单纯 的 选择 数字 和 输入 数字 ， 这 种 方式 允许 
用 户 遇 到 大 数额 时 可 以 手动 输入 ， 遇 到 小 数额 变化 时 又 可 以 通过 点 击 逐 步 增 减 。 


如 何 提升 用 户 信息 录入 效率 


1. 防止 输入 框 的 遮挡 


错误 示例 : 如 图 ， 当 我 们 要 输入 最 下 面 “ 亲 友 公司 名 称 ” 时 ， 键 盘 被 唤醒 ， 同 时 遮挡 了 所 
有 需要 填写 的 表单 组 件 ， 需 要 滑动 底层 界面 才能 继续 填写 。 这 种 体验 是 十 分 糟糕 的 。 


正确 示例 : 在 用 户 输入 完 当 前 表单 的 某 一 段落 时 ， 底 层 界面 位 置 应 该 自动 往 上 移动 ， 显 示 
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当前 该 填写 项 目的 完整 输入 框 ， 确 保 表单 在 填写 时 无 任何 元 素 的 遮挡 ， 方 便 用 户 的 输入 。 


< er 
Wem wen 
ee 
i 宫 a 
am wes worne men 时 
ee 国 am 国 EYE 
Rf SH A A ~ 二 BR RF 在 |、 


qlwlelritlylulilolp qiwielritiylulilolp 


06000000000 alsldlflonjlkl) 


园 小 加 O000000 | 
DEC Wi | 


2. 实时 校 验 


错误 示例 : 需要 用 户 填 完 所 有 信息 提交 时 ， 才 反馈 存在 很 多 错误 ， 用 户 需要 根据 系统 所 给 
出 的 提示 再 次 修改 提交 ， 影 响 用 户 体验 。 


正确 示例 : 每 当 用 户 离开 当前 输入 项 时 ， 系 统 根据 用 户 输入 的 信息 进行 判断 并 及 时 告知 用 
户 输入 的 正确 性 ， 甚 至 还 能 引导 用 户 进行 接 下 来 一 系列 有 关 的 输入 。 如 此 就 会 减少 用 户 的 
反复 操作 ， 表 单 也 会 变 得 更 容易 让 用 户 接受 。 


《 [ < <《 NP 


阿里 巴巴 
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3. 键盘 匹配 

在 表单 中 通常 会 出 现 不 同 的 输入 需求 ， 有 需要 输入 文字 的 ， 有 需要 输入 英文 的 ， 有 需要 输 
入 数字 的 ， 届 时 我 们 应 该 为 不 同 的 输入 需求 匹配 不 同样 式 的 键盘 ， 减 少 用 户 的 切换 操作 ， 
提高 用 户 的 输入 体验 。 例 如 ， 输 入 电话 号 码 时 就 可 以 只 存在 数字 键盘 ; 而 输入 邮箱 时 不 
需要 拼音 ， 键 盘 就 只 保留 英文 和 数字 即 可 。 


手机 号 : 。 1860422111 


000000000D 
90990000000 
B600000 
| se 


[' |a|s| 

ED Wl Bl 

EE 桓 更 
[| 0 


美 团 外 卖 


4. 智能 预 设 


错误 示例 : 表单 中 的 信息 每 次 都 需要 重新 填写 ， 填 写 表单 本 身 对 用 户 来 说 就 是 一 件 很 头痛 
的 事情 ， 这 样 不 仅 增加 了 用 户 的 操作 ， 出 错 率 也 会 相对 提升 。 


正确 示例 : 每 日 优 鲜 中 第 一 次 添加 收 货 地 址 时 ， 由 于 产品 不 了 解 用 户 的 个 人 信息 ， 所 以 
所 有 项 目 都 需要 自己 手动 完成 。 但 当 我 们 再 次 添加 地 址 时 ， 产 品 会 自动 默认 填充 收 货 
人 、 手 机 号 码 、 城 市 等 之 前 的 信息 ， 这 就 减少 了 用 户 的 填 表 时 间 。 


第 1 章 “移动 端 组 件 的 认识 与 运用 


本 ee E 
Laie PRE 043427 
每 I ee 
EC [mm 全 es | 


每 日 优 鲜 


画 重 点 


( 1 ) 表单 的 基本 组 件 : 表单 中 的 内 容 有 很 多 ， 例 如 复 选 框 、 单 选 框 、 输 入 框 、 下 拉 选 
择 、 开 关 、 分 段 控件 等 等 ， 本 文 主要 分 析 了 输入 框 、 分 段 控件 、 状 态 切换 器 、 滑 动 控制 
器 、 数 字 步 进 器 。 


(2 ) 提升 录入 效率 的 方法 : 防止 输入 框 庶 挡 、 实 时 校 验 、 键 盘 匹 配 、 智 能 预 设 。 


通过 明确 表单 中 组 件 的 功能 以 及 在 不 同 场景 的 使 用 ， 可 以 让 表单 的 设计 变 得 清晰 易 懂 ， 提 
高 用 户 的 填写 率 。 同 时 我 们 应 该 思考 如 何 优化 用 户 在 使 用 时 的 交互 效果 ， 避 免 造 成 反复 的 
操作 。 


参考 资料 

App 设 计 必修 课 : 如 何 设计 出 规范 的 移动 表单 组 件 http://t.cn/Eq1AeNN 
移动 端 下 拉 表 单 的 更 好 选择 ”http://t.cn/RKIWZ8s 

干货 ! 移动 端 表单 最 佳 实践 ”http://t.cn/Eh6EBOL 


如 何 设 计 选择 菜单 ”http://t.cn/RS5jpjS6 
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表单 中 的 勾 选 框 和 开关 http://t.cn/RtvoZdb 
小 功能 、 大 细节 | 关于 选择 菜单 的 套路 ”http://t.cn/RDUU8QY 
移动 端 表单 设计 小 妙招 http://t.cn/EfiiOTd 


这 个 控件 叫 : Segment Control/ 分 段 控件 ( 附录 与 Tabs 的 区 别 ) 


http://t.cn/Efii1 PR 
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BS 和 
05 评论 区 


互联 网 让 大 家 可 以 在 虚拟 的 世界 里 畅所欲言 ， 而 每 个 产品 的 评论 区 就 成 了 大 家 发 表 看 法 的 
常用 场所 ， 在 满足 一 部 分 用 户 的 发 言 欲 望 的 同时 ， 也 满足 了 旁观 群众 的 好 奇 心 ， 默 默 “ 潜 
水 ”也 能 了 解 一 个 江湖 。 网 易 云 音 乐 能 火 起 来 的 重要 原因 之 一 ， 就 是 它 走 心 的 评论 ; 视频 
网 站 的 弹 幕 文化 ， 也 都 是 基于 这 一 原因 而 出 现 的 。 


但 是 ， 作 为 一 个 有 产品 思维 的 设计 师 ， 我 们 不 能 只 看 到 这 些 表面 的 东西 ， 需 要 去 分 析 一 下 
它们 背后 的 逻辑 ， 知 道 它们 有 哪些 不 同 之 处 ， 又 是 基于 什么 原因 而 做 得 不 一 样 。 


评论 区 样式 
1. 回复 别人 时 ， 内 容 下 方 带 上 原 帖 内 容 


如 下 图 网 易 云 音乐 ， 当 你 回复 别人 的 时 候 ， 在 你 的 帖子 下 方 会 带 上 原 帖 ， 也 就 是 你 回复 的 
那个 人 发 的 文字 。 


优点 
(1 ) 能 让 人 一 眼 就 看 到 回复 的 是 哪 条 帖子 ， 信 息 层 级 明显 、 容 易 区 分 ; 


(2 ) 活跃 了 评论 区 的 氛围 ， 每 一 条 回复 都 会 新 增 一 条 评论 动态 ，10 个 人 回复 就 会 有 11 条 
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动态 ( 原 帖 本 身 +10 条 回复 内 容 ) ， 给 人 一 种 很 多 人 在 用 的 感觉 ， 适 合 产品 早期 用 户 体 量 
小 的 时 候 。 


(1 ) 当 回复 信息 较 多 时 ， 看 不 懂 谁 回复 谁 ， 在 你 来 我 往 的 对 话 中 ， 每 次 只 附带 一 条 原 帖 
内 容 ， 在 外 人 看 来 没有 前 因 后 果 ， 让 人 摸 不 着 头脑 ， 对 话 感 不 强 ; 


( 2 ) 不 适合 带 图 片 的 评论 ， 如 果 每 一 条 回复 下 方 都 会 带 上 原 帖 的 图 片 ， 图 片 所 占 位 置 太 
大 ， 一 屏 内 显示 不 了 几 条 评论 。 而 且 当 多 人 回复 同一 条 评论 的 时 候 ， 图 片 重复 次 数 多 。 


2. 回复 别人 时 ， 回 复 内 容 在 原文 的 下 方 


社交 类 、 服 务 类 的 产品 较 常 使 用 这 种 方式 ， 即 回复 别人 的 帖子 ， 回 复 内 容 在 原文 的 下 方 。 
例如 视频 网 站 、 微 博 这 一 类 产品 用 户 体 量 较 大 ， 回 复 同一 条 帖子 的 几率 较 大 , 每 一 条 回复 
都 带 上 原 帖 ， 显 然 不 合理 。 试 想 一 下 ， 你 和 100 个 人 针对 同一 条 内 容 进行 回复 ， 你 一 定 是 
想 第 一 时 间 看 到 所 有 其 他 人 怎么 回复 的 ， 而 不 是 100 条 带 上 原 帖 的 回复 。 


当 同 一 条 内 容 评论 人 数 过 多 ， 没 有 空间 展示 所 有 的 回复 内 容 ， 可 以 只 展示 几 条 回复 内 容 ， 
再 用 其 他 的 方式 如 “查看 全 部 121 条 回复 ”的 链接 ， 让 用 户 知道 还 有 其 他 的 评论 ， 诱 导 他 
们 点 击 进入 下 一 页 查看 所 有 评论 。 


急 贝 妇 家 的 小 妇女 人) 


加 你 们 喜欢 电 一 拓 的 主人 公 ? 


< @ om 


@ eseozrer 自 
123 


人 @ maseama -- 四 
nm 


© 6 


芒果 TV 


第 1 章 “移动 端 组 件 的 认识 与 运用 


( 1 ) 用 户 之 间 互 动 强 ， 就 像 在 现实 生活 中 小 组 讨论 一 样 ， 大 家 都 争 对 同一 个 主题 ， 发 表 
自己 的 言论 ， 带 入 感 强 ; 
(2 ) 信息 层级 明确 ， 针 对 同一 条 内 容 的 回复 都 在 一 个 页 面 同一 个 层级 内 。 


( 1 ) 需要 点 击 跳 转 到 新 的 页 面 ， 才 能 看 到 针对 这 条 评论 的 所 有 回复 ,流程 了 多 了 一 步 ; 
(2 ) 每 条 评论 都 展示 几 条 回复 的 话 ， 占 据 了 太 多 的 屏幕 空间 。 


3. 只 展示 评论 数量 ， 回 复 需 要 点 击 进入 详情 页 


现在 很 多 App 都 开始 用 这 种 方式 ， 只 在 外 面 展 示 回复 、 点 赞 、 转 发 的 数量 ， 想 要 回复 
或 者 查看 其 他 人 回复 的 内 容 的 时 候 ， 需 要 点 击 跳 转 到 评论 详情 页 。 这 就 相当 于 我 们 去 一 
个 陌生 的 地 方 狂 一样， 都 是 自己 不 知道 的 店铺 ， 那 我 们 只 能 通过 店 里 的 人 流量 ( 点 赞 
数 ) 、 大 家 的 推荐 指数 ( 转发 数 ) 、 店 铺 装 修 风格 ( 触动 人 的 文案 或 图 片 ) 等 ， 来 选择 
进入 哪 家 店铺 。 


无 SM 卡 全 260 # am) 
818 体 育 ws 
“者 ES 
加 油 。 锣 
前 加 


@ 九 收入 氏 


欧美 的 足球 是 文化 ， 我 们 的 足球 是 运动 
前。 4 回复 


[EE re 

据说 世界 杯 开幕 ， 那 个 歌手 竖 中 指 就 已 

【 汪 天 空中 的 浮云 经 预测 了 决赛 是 法 国 和 克罗地亚 ， 法 克 
(FUCK) 


说 的 我 都 要 器 了 ， 你 们 傅 真 的 就 不 能 不 那么 控 吗 ? 真 
是 要 了 我 们 这 些 没 能 和 心中 的 他 在 一 起 的 股 媳 们 机 里 
眼睛 吗 1 好 伤心 昌 | 优 参 号 印 参 


芒果 TV 


29 分 名 前 2 复 


人 麻将 52190563 


中 国 队 要 是 能 进 决 赛 ， 全 国人 一 人 给 国 
家 队 队员 发 一 块 钱 奖金 都 行 


52 分 入 而 ，。 3 回复 


用 户 5738067246 


普京 : 小 梅 ， 对 不 起 ， 我 请 的 人 ， 你 坐 


着 也 要 陪 完 。 
人 写 评论 [ei 
今日 头条 
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优点 
(1 ) 节省 了 页 面 空 间 ， 同 样 大 小 的 区 域 能 够 展示 更 多 的 内 容 ; 


(2 ) 给 用 户 选择 的 余地 ， 他 只 需要 点 自己 感 兴趣 的 内 容 去 回复 ， 同 时 和 所 有 对 这 条 评论 
感 兴趣 的 人 一 起 沟通 交流 ， 而 不 是 置身 于 一 个 大 杂烩 的 场景 之 中 。 


缺点 
( 1 ) 操作 比较 复杂 ， 需 要 点 击 进入 新 的 页 面 ， 多 了 一 步 页 面 操作 ， 且 引导 性 不 够 ; 


(2 ) 当 单 条 评论 不 够 有 吸引 力 的 时 候 ， 用 户 没有 点 击 欲望 ， 长 此 以 往 ， 每 条 评论 的 回复 
太 少 ， 会 打击 用 户 的 积极 性 ， 后 续 可 能 就 不 想 参与 了 。 


4. 特定 情况 才能 评论 


以 淘宝 为 例 ， 用 户 购买 之 后 才 有 评价 的 资格 ， 否 则 只 能 回复 别人 的 评论 。 买 过 才 有 发 言 权 ， 
这 能 在 一 定 程度 上 维持 评论 区 的 和 谐 ， 不 至 于 出 现 一 片 倒 的 水 军 。 针 对 一 些 恶 意 差 评 ， 商 家 
的 回复 信息 可 以 直接 显示 在 下 方 ， 信 息 展示 明确 ， 在 一 定 程度 上 能 缓解 用 户 的 反感 。 


ne 
,18-07-06 配色 分 类: 对 酒 肌 谎 红 条 和 本 基 特 别 大 


超 奶 思 ， 没 想到 这 套 水 乳 太 好 吸收 了 吧 ! 不 油 脐 ， 

特 水 润 ， 抹 开 一 下 就 吸收 了 ， 改 善 水 油 不 平衡 好 像 
真 的 有 效果 。 之 前 一 直 听 盆 友 安利 ， 没 想到 效果 真 
的 这 么 赞 ! 


掌柜 回复 : 为 了 寻 你 ， 我 错过 了 许 许 许 多 多 的 良友 美 
景 ， 错 过 了 闲 看 花 开花 落 的 心情 ， 可 我 不 后 悔 ， 因 为 
你 是 innisfree 今 生 最 美的 遇见 ， 寻 得 你 ， 我 就 拥有 了 
全 世界 的 花 开颜 色 。 你 的 到 来 ， 为 我 拂 去 了 浪迹 天 涯 
的 孤独 ， 我 漂泊 的 灵魂 再 也 不 用 轧 转 流连 于 享 台 楼 榭 


之 间 ， 沁 漏 云 水 之 上 。 -购买 正品 
倍 诗风 叭 ， 请 认 淮 【innisfree 官 方 久 舰 店 ] {@) 
( 国 ) 
[ha 瑟 强 
淘宝 


评论 的 排序 方式 


评论 的 排序 方式 也 有 很 多 种 ， 目 前 最 主流 的 排序 方式 就 是 按照 评论 、 点 赞 的 数量 依次 排 
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序 ,或 者 是 按照 时 间 ， 最 早 回复 的 在 下 面 ， 最 晚 回复 的 在 最 上 面 。 


1. 按照 点 赞 数 多 少 排序 


按照 点 赞 数 的 多 少 排序 ， 当 点 赞 数 一 样 的 时 候 ， 按 时 间 倒 序 排列 。 
本 


难 了 也 许 不 乏 坚 持 的 人 
昌 是 南 畏 北 狂 


这 样 的 话 能 优先 看 到 热门 的 评论 ， 看 到 别人 都 在 说 什么 。 而 且 一 旦 自己 的 评论 被 人 点 赞 上 
了 排行 榜 前 几 名 ， 能 给 用 户 带 来 极 大 的 成 就 感 ， 激 励 着 他 继续 使 用 这 个 产品 。 


但 是 这 种 方式 有 一 个 浆 端 ， 当 自己 回复 别人 的 帖子 后 ， 按 照 点 赞 数 排序 的 话 


， 自 己 的 评论 


会 被 掩盖 在 热门 评论 下 ， 很 难 找 到 自己 评论 的 内 容 ， 会 让 用 户 以 为 操作 没有 成 功 。 


2. 按照 评论 时 间 正 序 排列 
这 种 方式 比较 符合 正常 人 的 思维 逻辑 以 及 视觉 流程 ， 从 上 到 下 ， 先 来 的 先 显 
显示 。 但 是 却 不 太 适 合 移动 端的 体验 ， 当 用 户 一 打开 最 先 看 到 的 是 时 间 最 久 
觉得 这 个 App 信息 更 新 得 太 不 及 时 ， 跟 不 上 潮流 。 而 且 一 些 优质 的 评论 会 
晚 排 在 很 下 面 ， 从 而 被 用 户 忽视 。 


示 ， 后 来 的 后 
的 评论 时 ， 会 
因为 发 布 时 间 
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3. 按照 评论 时 间 倒 序 排列 


这 种 方式 下 ， 用 户 自己 回复 的 内 容 立 马 就 能 看 得 到 ， 操 作 有 反馈 ， 体 验 较 好 ， 但 相应 的 优 
质 评论 容易 被 时 间 淹 没 。 


今日 头条 


这 几 种 排序 方式 还 可 以 组 合 起 来 使 用 ， 例 如 网 易 云 音乐 就 结合 了 点 赞 数 和 时 间 倒 序 这 两 种 
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方式 ， 在 最 上 方 显示 十 几 条 精彩 评论 ， 按 点 赞 数 排序 ， 下 方 按 照 时 间 倒 序 排序 ， 在 一 定 程 
度 上 满足 了 用 户 既 想 看 到 热门 的 评论 内 容 ， 又 想 实 时 看 到 自己 发 布 的 内 容 的 心理 。 


pe 


评论 
项 语 版 中 文 版 都 很 好 所 勒 名 名 


全 大 铺 缠 好 蝎 


这 种 调调 只 要 歌词 不 是 那 种 口水 的 其 实 都 候 好 听 


各 折 评论 (2010) 


@ 介子 的 查 子 520 


网 易 云 音乐 


不 过 这 种 方式 仍 有 弊端 ， 热 门 评论 较 多 ， 十 几 条 评论 需要 划 过 好 几 屏 ， 对 我 这 种 很 少 听 歌 
的 用 户 来 说 ， 听 到 好 歌 难得 去 评论 一 下 ， 结 果 半 天 没 找到 自己 的 评论 在 哪里 。 试 了 好 几 
次 ， 划 了 好 几 屏 才 看 到 自己 的 回复 内 容 安 静 地 身 在 最 新 评论 里 。 


微 博 则 单独 进行 了 分 类 ， 用 户 可 以 根据 自己 需要 选择 评论 排列 方式 ， 默 认 是 按 热度 ， 也 就 
是 点 赞 数 。 


中 国 移动 全 2128 $72%00+ 
《首页 Ars ETI 
你 看 到 了 时 间 的 脑 步 3? 
上 海 戏剧 学 院 表 演 系 01 斑 


前 来 报到 
@ 青 春 同 学 会 班 和 会 


等 挟 2379 评论 1611 


em 
全 于 从 
看 到 7 胡 收 项 

区 转发 已 这 由 要 


微 博 
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画 重 点 


当 你 的 产品 评论 时 效 性 较 强 的 时 候 ， 评 论 排序 方式 可 以 选择 时 间 倒 序 ， 最 新 的 评论 显示 在 
最 上 方 。 如 视频 类 App ， 回 复 内 容 大 多 类 似 ， 所 以 按照 时 间 来 排序 最 好 不 过 了 ; 当 你 的 
产品 是 希望 用 内 容 来 吸引 用 户 ， 那 你 可 以 选择 按 点 赞 数 排序 ， 点 赞 最 多 的 显示 在 最 上 方 ， 
如 新 闻 类 App。 


至 于 回复 别人 评论 的 时 候 怎么 显示 ， 可 以 根据 自己 产品 的 调 性 而 定 ， 当 前 期 产品 活跃 度 不 
够 ， 评 论 较 少 的 时 候 ， 可 以 采取 每 条 回复 都 带 上 原 帖 ， 这 样 会 显得 评论 区 的 内 容 多 ， 和 氛围 
活跃 一 些 ; 当 产 品评 论 数量 多 的 时 候 ， 可 以 把 针对 一 条 评论 的 所 有 回复 内 容 放置 到 一 个 新 
的 页 面 ， 这 样 用 户 在 看 别人 的 评论 以 及 回复 的 时 候 有 针对 性 ， 也 有 前 因 后 果 ， 能 够 知道 谁 
回复 了 谁 ， 谁 又 评论 了 谁 。 
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06 提示 框 


在 日 常 工作 中 我 们 经 常会 看 到 各 种 类 型 的 提示 框 ， 在 官方 的 规范 里 ， 它 们 都 有 各 自 的 叫 法 
以 及 用 法 ， 什 么 场景 下 用 什么 样 的 提示 框 ， 也 早已 有 了 定义 。 只 是 有 些 提示 框 类 型 极其 相 
似 ， 难 免 有 人 会 在 工作 中 将 其 归 错 类 别 。 


提示 框 的 作用 


在 细 分 提示 框 的 种 类 之 前 ， 先 说 一 下 它 的 作用 。 提 示 框 作为 界面 中 一 个 必 不 可 少 的 组 件 ， 
有 它 存在 的 独特 的 意义 ， 主 要 的 作用 有 三 个 


1. 提醒 用 户 


在 用 户 操 作 时 给 予 提 醒 ， 特 别 是 一 些 操作 会 影响 到 用 户 利益 的 时 候 ， 通 过 提示 框 去 提醒 他 
们 做 二 次 确认 ， 减 少 因为 误 操作 而 带 来 的 损失 。 


2. 选择 权 


用 户 进行 重要 的 操作 ， 例 如 删除 所 有 订单 且 删 除 后 不 可 复原 时 ， 通 过 提示 框 把 选择 权 给 用 
户 自己 ， 让 他 们 自己 决定 当前 的 操作 是 否 进行 下 去 。 


3. 知情 权 
告知 用 户 当 前 所 发 生 的 事情 ， 让 他 们 对 当前 状态 有 一 个 预 估 ， 让 用 户 有 知情 权 。 


提示 框 的 种 类 


按照 不 同 的 维度 划分 的 话 ， 提 示 框 的 种 类 特别 多 。 本 文 以 最 简单 的 维度 一 一 模 态 和 非 模 态 
进行 划分 。 模 态 框 指 的 是 当 它 出 现 的 时 候 ， 用 户 必须 对 其 进行 操作 ( 确定 或 者 取消 ) ， 才 
攻关 闭 它 ， 进 行 下 一 步 。 而 非 模 态 框 则 指 的 是 不 需要 用 户 进 行 操作 ， 它 自己 会 在 设 定 的 时 
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间 内 自动 消失 ， 用 户 只 能 等 待 它 自己 默默 消失 。 


1. 模 态 对 话 框 一 一 Dialog 

关于 Dialog，Material Design 是 这 样 说 的 : “Dialog 用 于 提示 用 户 做 一 些 决定 ， 或 者 是 完 
某 个 任务 时 需要 一 些 其 他 额外 的 信息 。 Dialog 可 以 是 “ 取消 /确定 ”的 简单 应 答 模式 ， 也 可 以 
是 自 定义 布局 的 复杂 模式 ， 例 如 说 一 些 文本 设置 或 者 是 文本 输入 。” 


简单 来 说 ，Dialog 主要 是 去 提示 用 户 当前 页 面 需要 去 做 选择 ， 而 用 户 必须 对 提示 框 的 内 容 
进行 响应 ， 才 能 进行 其 他 的 操作 。 


Dialog 一 般 包 含 标题 、 内 容 区 域 、 操 作 区 域 。 


A Short Title is Best * 一 一 标题 ， 也 可 以 没有 
Amessage shoud be a short, 
complete sentence. * 一 一 内 容 区 域 ， 具 体 描述 用 户 需要 做 什么 选择 


Action 1 Action2 “一 一 操作 区 域 ， 二 选 一 


地 宇 下 寺中 的 人 部? 


人 本 下 要 提出 登 好) 


网 易 云 音乐 滴 滴 出 行 


操作 区 域 一 般 有 两 个 功能 按钮 ， 通 常 一 个 是 肯定 的 一 个 是 否定 的 ( 与 肯定 的 事件 对 立 ) 。 
一 般 积 极 的 、 肯 定 的 或 者 说 产品 希望 用 户 做 的 选择 ， 会 放 在 右边 。 肯 定 的 事件 也 可 以 是 具 
有 破坏 性 的 ， 例 如 “删除 、 放 弃 ” 等。 


肯定 事件 和 否定 事件 除了 可 以 使 用 “确认 ”“ 取 消 ”外 ， 也 可 以 用 其 他 一 些 动词 或 者 是 动 
词 短 语 来 代替 ,例如 “升级 、 点 错 了 ”等 。 
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友情 提示 
内 容 向 未 保 存 ， 你 确定 放弃 ? 


点 错 了 放弃 


Boss 直 聘 掌上 生活 


1 ) 延展 一 一 自 定义 提示 框 

当然 也 有 只 包含 一 个 功能 按钮 的 情况 ， 这 个 时 候 需 要 注意 的 是 弹出 的 消息 是 否 重要 到 非 要 
用 户 点 击 确认 ， 如 果 是 ， 那 就 用 Dialog， 如 下 图 微 信 中 的 提示 框 ， 就 是 默认 只 有 一 个 功能 
按钮 的 Dialog。 如 果 不 是 ， 可 以 考虑 用 其 他 的 ， 例 如 Toast。 


你 的 微 信 帐 号 于 17:24 在 
HUAWEI-PRA-ALOOX 设 备 上 
通过 短信 登录 。 如 果 这 不 是 你 
的 操作 ， 你 的 短信 验证 码 已 经 
泄漏 。 请 勿 转发 短信 验证 码 , 
并 排查 手机 是 否 被 植 入 森马 导 

致 短信 被 转发 。 


确定 
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于 Dialog 强制 要 求 用 户 进行 操作 ， 用 户 体验 不 是 很 好 ， 因 此 后 续 延 展 出 了 其 他 的 
样式 。 这 种 提示 框 也 有 操作 按钮 ， 它 和 Dialog 最 大 的 区 别 就 是 点 击 操作 按钮 或 者 提 
示 框 外 的 任何 位 置 ， 都 可 以 关闭 该 提示 框 ， 降 低 了 操作 难度 。 但 它 不 算 严格 意义 上 的 
Dialog。 


这 类 提示 框 现在 较 多 用 在 自 定义 的 提示 框 上 ， 例 如 一 些 运营 活动 ， 自 定义 的 提示 框 能 更 好 
地 传达 内 容 ， 从 而 吸引 用 户 点 击 。 


A 5 大 


通用 红包 


| ( 
国 * ( 


喜马拉雅 美 团 外 卖 


2 ) 特殊 情况 

如 果 Dialog 出 现 三 个 或 以 上 的 功能 框 ， 会 增加 用 户 的 选择 负担 ， 而 且 横向 显示 的 话 在 视 
觉 上 也 显得 拥挤 ， 所 以 就 有 了 一 个 由 Dialog 延伸 出 来 的 Actionbar， 它 比 Dialog 拥有 更 
多 的 功能 按钮 ， 能 够 给 用 户 提供 更 多 的 功能 选择 。 
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设 为 私密 照片 


发 送 给 朋友 
收藏 
保存 图 片 
删除 


微 信 iOS 微 信 Android 


Actionbar 一 般 都 有 一 个 默认 的 “取消 ”功能 按钮 ( 当然 也 可 以 没有 ) 点 击 该 按钮 后 关闭 
弹 框 。 用 户 点 击 弹 窗 以 外 的 区 域 也 相当 于 点 击 了 “取消 ”按钮 ， 会 关闭 弹 框 。 


当 功 能 按钮 数量 过 多 时 ， 不 适合 用 文字 列表 的 形式 展示 ， 可 以 用 图 形 加 文字 的 形式 来 
展示 。 


2. 非 模 态 对 话 框 一 一 Snackbar 


关于 Snackbar, Material Design 是 这 样 说 的 : “Snackbar 是 一 种 针对 操作 的 轻 量 级 反 
馈 机 制 ， 常 以 一 个 小 的 弹出 框 的 形式 出 现在 手机 屏幕 下 方 或 者 桌面 左下 方 。 它 们 出 现在 屏 
幕 所 有 层 的 最 上 方 ， 包 括 浮 动 操作 按钮 。 


它们 会 在 超时 或 者 用 户 触摸 屏幕 其 他 地 方 之 后 自动 消失 。Snackbar 也 可 以 在 屏幕 上 滑动 
关闭 。 当 它们 出 现时 ， 不 会 阻碍 用 户 在 屏幕 上 的 操作 ， 并 且 也 不 支持 输入 。 屏 幕 上 同时 最 
多 只 能 显示 一 个 Snackbar”。 
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简单 来 说 ，Snackbar 是 介 于 Dialog 和 Toast 两 者 之 间 的 一 种 轻 量 级 反馈 机 制 ， 以 文本 
形式 存在 ， 可 以 包含 0 ~ 1 个 操作 ， 不 能 是 取消 按钮 。 


内 容 已 标记 为 已 读 


当 只 以 文本 形式 出 现 的 时 候 ， 形 式 和 Toast 一 样 ， 不 需要 用 户 进行 操作 ， 等 默认 时 长 结束 
后 会 自动 消失 ; 不 过 它 比 Toast 多 的 一 点 是 ， 用 户 可 以 在 屏幕 上 滑动 将 它 关闭 。 
需要 注意 的 是 Snackbar 不 应 该 持续 存在 或 相互 堆 共 ， 也 不 要 阻挡 浮动 操作 按钮 。 


内 容 已 标记 为 已 读 


延展 一 一 引导 浮 层 


由 于 Snackbar 太 受 限制 ， 不 能 有 图 标 只 能 以 文本 形式 存在 ， 在 现在 的 App 里 用 
得 越 来 越 少 ， 少 到 都 找 不 到 什么 例子 。 而 现实 中 又 需要 一 种 介 于 Toast 和 Dialog 
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之 间 的 轻 量 级 的 操作 提示 。 所 以 就 延伸 出 了 另外 一 种 样式 ， 暂 且 将 它 归 为 “引导 浮 
层 ” 吧 。 


引导 浮 层 和 Snackbar 最 大 的 区 别 是 ， 它 可 以 有 图 标 、 图 片 ， 甚 至 还 可 以 引导 用 户 去 新 的 
页 面 ， 这 也 是 它 更 受 有 欢迎 的 原因 所 在 。 


3. 非 模 态 对 话 框 一 一 Toast 


关于 Toast，Material Design 是 这 样 说 的 : “Toast 同 Snackbar 非常 相似 ， 但 是 
Toast 并 不 包含 操作 也 不 能 从 屏幕 上 滑动 关闭 。” 


一 深 
| .7 
小 红 书 爱 奇 艺 
简单 来 说 Toast 主要 的 作用 是 对 用 户 当前 的 操作 给 予 反 馈 ， 用 户 不 需要 对 弹出 的 内 容 进行 


响应 ， 相 对 地 也 无 法 对 它们 做 出 控制 ， 只 能 等 设置 的 默认 时 长 结束 后 自动 消失 。 它 可 以 出 
现在 页 面 的 任何 位 置 ， 可 以 是 纯 文本 的 ， 也 可 以 是 图 形 结合 文本 的 。 


0 as 了 0 ta 70 0% 
x 0 [ey = 注 8 热门 曙 
怎么 样 的 临摹 才 最 有 效 过 就 是 演员 明星 ”设计 电视剧 新: 十 


多 栓 子 的 榨 子 Mandy 
PyoneRP 


早 呀 早 信 


< fh 中国 4 & 


微 信 微 博 
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特别 说 明 


提示 框 的 作用 是 用 来 提示 信息 的 ， 但 不 是 所 有 的 提示 信息 都 需要 用 到 提示 框 ， 因 为 提示 框 或 
多 或 少 都 会 “打扰 ”到 用 户 的 操作 ， 所 以 能 有 别 的 解决 方式 的 时 候 ， 优 先 考虑 别 的 方式 。 


同 理 ， 提 示 框 存在 的 另 一 个 原因 就 是 在 用 户 犯 错 之 前 及 时 制止 了 他， 所 以 如 果 有 其 他 的 方式 
能 够 在 提示 框 出 现 之 前 就 规避 错误 ， 那 要 优先 使 用 。 以 京东 登录 页 面 为 例 ， 密 码 那 一 行 有 
一 个 小 眼睛 的 图 标 ， 点 击 之 后 显示 密码 。 当 用 户 认为 自己 没有 输 错 密码 ， 但 却 提醒 密码 错 
误 时 ， 与 其 多 次 尝试 来 找到 错误 所 在 ， 不 如 直接 点 击 显示 密码 的 图 标 体验 来 得 好 。 


二 中 国 移动 4G 19:07 Tu 60%M+ 。“ 霜 中 国 攀 动 4G 19;07 了 本 60% 顺 7 
X 客服 X 客服 
3 学 
571602094@qq.com 571602094@qq.com 
9 局 记 塘 码 123 忘记 窗 码 
京东 


再 例如 像 支 付 宝 这 样 把 提示 信息 放置 在 按钮 上 ， 就 能 避免 提示 框 的 出 现 打 扰 到 用 户 的 操 
作 ， 而 且 信 息 放置 在 按钮 上 更 加 明显 ， 也 不 会 被 用 户 忽略 。 


中 国 移动 4G 19:10 76% 
《返回 提现 © 
九江 银行 
尾 号 4115 储 著 卡 


提现 金额 【收取 0.1% 服 务 费 ) 
¥1 


服务 费 0.10 元 全 部 提现 


支付 宝 


画 重 点 


1. 提示 框 的 三 个 作用 
( 1 ) 提醒 用 户 ， 在 他 们 犯错 之 前 及 时 制止; 
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(2 ) 给 用 户 选择 权 ， 让 他 们 自己 决定 当前 的 操作 是 否 进行 ; 


( 3 ) 告知 用 户 当前 所 发 生 的 事情 ， 让 他 们 对 当前 状态 有 一 个 预 估 ， 让 用 户 有 知情 权 。 


2. 提示 框 的 类 型 以 及 区 别 


Dialog 一 一 模 态 对 话 框 ， 需 要 用 户 对 当前 内 容 进行 操作 ， 不 会 自动 消失 ， 会 打 断 用 户 之 
前 的 操作 流程 ; 


类 型 


必须 包含 


可 选 


不 包含 


使 用 场景 


出 现 位 置 


优点 


缺点 


延展 样式 


Dialog 


模 态 对 话 杠 


内 容 文本 ， 功 能 按钮 


标题 


无 


当 提示 信息 至 关 重 要 ， 必 须 用 户 
做 出 决定 的 时 候 


任何 位 置 


一 般 出 现在 页 面 中 间 


1 提示 信息 明显 ， 不 容易 被 忽略 
2. 让 用 户 自己 做 选择 ， 让 他 们 党 
得 自己 有 话语 权 ， 体 验 好 


会 打 断 用 户 原本 正在 进行 的 操作 


Toast 


非 模 态 对 话 框 


文本 


简单 的 图 形 


任何 操作 


当 提 示 信息 只 需要 告知 用 户 不 需 
要 他 向 出 选择 的 时 候 


任何 位 置 


一 般 出 现在 页 面 中 间 


1. 用 户 当前 的 状态 
2. 不 阻挡 用 户 原本 正在 进行 的 操 
作 


1. 无 法 控制 显示 的 时 长 ， 只 能 等 
它 自己 消失 
2. 容易 被 忽略 


Snackbar 


非 模 态 对 话 框 


文本 


1 个 功能 按钮 


以 文本 形式 存在 ) 


1 图 标 
2 取消 按钮 


其 他 两 种 场景 之 外 的 任何 场景, 
可 以 优先 考虑 这 个 


1. 纯 文本 形式 ， 对 用 户 干扰 少 
2. 可 以 包含 一 个 操作 按钮 和 用 户 
互动 


1. 展示 内 容 少 且 单 调 ， 只 能 文本 
形式 

2. 只 能 出 现在 屏幕 下 方 ， 容 易 被 
键盘 等 元 素 记 挡 


引导 浮 层 
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Snackbar 一 一 非 模 态 对 话 框 ， 用 户 可 以 对 当前 内 容 进行 操作 ， 也 可 以 等 它 自动 消失 ， 不 
会 打 断 用 户 的 当前 操作 ; 


Toast 一 一 非 模 态 对 话 框 ， 用 户 无 法 对 当前 内 容 进行 操作 ， 只 能 等 它 自动 消失 。 
参考 资料 
Snackbars 与 Toasts http://t.cn/Ef5LFIB 


提示 框 (Dialogs) http://t.cn/Ef5yqFr 
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07 ”产品 列表 布局 


文 / 刘 芳 


在 设计 产品 列表 时 ， 经 常会 遇 到 不 知道 如 何 选择 布局 样式 的 问题 。 最 后 大 家 的 解决 方案 大 
多 是 参考 竞 品 ， 觉 得 样式 不 错 就 用 到 自己 的 产品 中 ， 它 是 否 合适 并 不 清楚 。 本 文 归纳 了 常 
见 的 六 大 布局 样式 ， 即 列表 、 大 图 网 格 、 两 列 网 格 、 两 列 瀑布 流 、 拼 图 、 三 列 网 格 布局 ， 
通过 对 它们 优 缺 点 和 使 用 场景 的 分 析 ， 掌 握 在 什么 情况 下 采用 何 种 布局 方式 。 


列表 布局 


列表 布局 也 就 是 我 们 常见 的 图 片 列表 ， 主 要 由 商品 缩 略 图 和 多 个 文字 信息 组 合 而 成 ， 列 表 
布局 重 在 文本 内 容 ， 对 于 图 片 的 质量 要 求 不 高 ， 图 片 主要 为 了 起 到 视觉 引导 的 作用 。 


1 中国 村 动 全 T4507 四 1 中国 全 T4507 - 
《< 水果 E> 《 水果 向 寺 
全 部 天 猫 店铺 淘宝 经 验 全 部 天 猫 店铺 淘宝 既 验 
折合 定量 硕 8 Li 视频 @ 8 入 选 了 


【和 衫 相 肌 般 古 】2019 实 娃 福 和 
匠心 之 作 特级 10 斤 装 新 鲜 水 果 
"98 


海南 贵妃 蕊 果 新 鲜 水 果 10 斤 中 大 
困 带 箱 红 爹 龙 青 批发 包 邮 当 季 热 


WEST 
v398 


迷 : 

海南 三 亚 东 萝 宗 23-25 斤 新 鲜 特 
ey 产 热带 当地 水 果 现 摘 40 大 树 波 
am 


"109s 


全 铺 量 
澳洲 进口 宣 桃 3 斤 油 桃 新 鲜 水 果 
EA 当 季 机 批发 包 贸 水 宣 桃 应 季 脆 桃 


列表 布局 淘宝 


优点 是 ， 遵 循 自 上 而 下 的 阅读 方式 ， 有 利于 信息 的 快速 扫 视 和 对 比 ; 空间 占 比 小 ， 一 屏 可 
展示 更 多 的 商品 ; 拓展 性 好 ， 可 展示 更 多 促销 信息 。 
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缺点 是 ， 图 片 尺寸 小 质量 差 ， 细 节 展 示 不 丰富 ; 样式 单一 、 趣 味 性 差 ; 由 于 信息 量 过 大 ， 
长 时 间 浏 览 会 引起 视觉 疲劳 。 


ET Fe eem i F006 xm) 
< 3 wm |) So 
EE 的 上 
全 部 商 区 ”全 部 分 类 > 智能 将 床 -。。 条 mY 


城 门口 老 火 铺 ( 中 航 店 ) 回 
Cocoe i106 条 #79 人 区 侏 罗 纪 世界 2 了 
类 志 toom A 分 .5 © 
本 巴 双 印象 原味 老 火 请 (高 新 区 店 ) 国 
WE cococ :os vea/ 人 


2937 MAX N/A, 248 


锦 城 印象 火锅 酒 模 ( 德 府 国 际 店 ) 
( " 


I 


大 众 点 评 -火锅 淘 票 票 -电影 


大 众 点 评 和 淘 票 票 都 可 以 算 团 购 类 App， 用 户 在 购买 时 不 会 看 商品 图 片 是 否 好 看 ， 决 定 用 
户 购买 的 关键 是 这 个 商品 是 否 是 用 户 需 要 的 ， 因 此 在 列表 布局 中 ， 标 题 、 产 品 参数 、 促 销 
信息 是 用 户 比较 关心 的 点 。 


什么 时 候 使 用 ? 
当 你 的 产品 图 片 质量 不 高 ， 产 品 数量 较 多 ， 需 要 通过 优惠 信息 、 价 格 参 数 等 来 进行 对 比 ， 
对 界面 效果 要 求 较 低 时 ， 可 以 采用 列表 布局 。 


大 图 网 格 布局 


大 图 网 格 布局 一 行 只 展示 一 张 图 片 ， 由 于 图 片 占 比 较 大 ， 因 此 一 屏 只 能 展示 1~2 张 ; 在 设 
计 上 它 可 以 分 为 通栏 和 非 通栏 设计 ， 通 栏 可 展示 更 多 的 信息 ; 非 通栏 也 就 是 卡片 风格 ， 其 
视觉 表现 力 更 强 ， 多 用 于 以 图 片 浏览 为 主 的 产品 。 
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中 国 乔 动 亏 F41216 了 1 中 国 移动 二 L41216 7 
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1SETTE CONI-TRULLO EDERA 
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大 图 网 格 布局 


优点 是 ， 图 片 占 比 大 ， 可 以 展示 更 多 的 商品 细节 和 丰富 界面 效果 ; 同时 自 上 而 下 的 浏览 顺 
序 ， 有 利于 信息 有 效 传达 。 


缺点 是 ， 页 面 空 间 的 消耗 大 ， 一 屏 可 展示 的 内 容 少 ， 不 利于 信息 的 查找 和 对 比 。 


中 国 移动 全 L41215 了 中国 区 动 全 下 于 5.55 7 


双流 小 胖 雅 舍 @ PE 
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WD WD en (erp, en 资深 咖 啡 爱好 者 ， 冲 出 好 喝 的 咖啡 
美国 层次 噶 馆 。16km ,美食 制 作 


蚂蚁 短 租 懒 人 周末 -今日 推荐 
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蚂蚁 短 租 和 懒 人 周末 分 别 是 短 租 和 生活 类 App， 其 共同 点 是 用 户 在 使 用 时 主要 通过 图 
片 决定 是 否 购买 ， 采 用 大 图 布局 可 展示 更 多 的 细节 ， 帮 助 用 户 浏览 ， 提 升 整体 的 界面 
效果 。 


什么 时 候 使 用 ? 


当 你 的 产品 数量 较 少 ， 图 片 有 专人 维护 ， 需 要 突出 品牌 感 时 ， 就 可 以 采用 大 图 展示 。 大 图 
展示 往往 视觉 效果 好 ， 多 用 于 图 片 类 、 租 房 类 、 商 品 推荐 等 列表 中 。 


两 列 网 格 布局 


两 列 网 格 布局 也 就 是 将 屏幕 一 分 为 二 ， 图 片 和 文字 进行 上 下 展示 ， 类 似 一 个 网 格 ， 浏 览 次 
序 类 似 Z 字 ， 因 此 产品 都 能 均衡 地 被 用 户 看 到 。 该 布局 图 片 占 比 较 大 ， 对 图 片 质量 要 求 较 
高 ， 适 用 于 图 片 对 比 为 主 的 商品 ， 如 下 图 所 示 : 


ma 下 T4127 miom 
< 过 日 全 形 a 


an ah BD rr ne " 


5 ss ML nm 


两 列 网 格 布局 


优点 是 ， 利 于 图 片 类 商品 的 对 比 选择 ; 页 面 空间 消耗 小 ， 一 屏 可 展示 4 ~ 6 条 信息 ; 视觉 效 
果 较 好 。 


缺点 是 ， 文 字 信 息 展示 空间 少 ， 只 能 展示 商品 标题 、 价 格 、 标 签 等 参数 ， 当 文字 信息 过 多 
时 界面 会 显得 凌乱 。 


免 打 孔 农用 单杠 防滑 吸 汗 手 股 
Y149 Y15 


大 


Keep- 商 城 
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中 国 攀 动 全 上 午 12:47 7 
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下 手 茶 饮 。 。 减 匡 好 物 。 。” 女士 夏装 。。 男士 看 装 
夏 焕 新 ， 清 新 如 你 
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并 代 条 注 科 上 湛 入 毅 ， 这 可 。 。 消 队 条 本 苏 ， 衣 入 娄 尖 不 这 


严 选 


Keep 一 商城 和 严 选 App 中 虽然 产品 有 所 不 同 ， 但 都 是 需要 用 户 通 过 图 片 对 比 进行 选择 ， 从 
产品 细节 展示 来 说 比 列表 布局 更 丰富 ， 从 产品 信息 对 比 来 说 比 大 图 更 便捷 ， 因 此 这 类 App 


中 两 列 网 格 布局 应 用 较为 广泛 。 


什么 时 候 使 用 ? 


如 果 你 的 产品 是 以 图 片 对 比 为 主 ， 同 时 又 不 需要 大 图 展示 时 ， 可 采用 该 布局 进行 设计 。 两 


列 网 格 布局 往往 和 列表 布局 会 一 起 使 用 。 


两 列 瀑布 流 布局 


两 列 瀑布 流 布局 也 就 是 将 屏幕 一 分 为 二 ， 和 常规 布局 类 似 ， 其 中 图 片 的 宽 固 定 ， 高 随 图 片 
的 尺寸 变化 而 变化 。 相 比 于 两 列 网 格 布局 ， 瀑 布 流 布局 更 加 不 规则 ， 适 用 于 产品 数量 较 
多 ， 用 户 目标 不 明确 的 情况 下 使 用 ， 如 下 图 所 示 : 
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和 下 种 义 上 开始 大 吕 
林政 和 基 在 学 册 之 后 ， 革 时 
由 于 妈 消 起 力 有 限 ， 只 尖 


两 列 瀑布 流 布 局 Nice 
优点 是 ， 可 根据 图 片 比例 自 适应 高 度 ， 图 片 的 细节 表达 更 有 力 ; 产品 展示 数量 多 ， 用 户 在 
使 用 时 可 以 无 限 下 滑 。 


缺点 是 ， 采 用 预 加 载 的 实现 方式 ， 因 而 不 能 预 估 产 品 多 少 的 数量 ; 在 浏览 时 产品 图 片 大 小 
一 ， 大 图 很 容易 被 记 住 ， 而 小 图 很 容易 被 忽略 。 
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在 汇总 时 笔者 发 现 现 在 很 多 App 列 表 都 采用 了 瀑布 流 的 形式 ， 例 如 小 红 书 和 淘宝 ， 它 们 均 
是 以 图 片 展示 为 主 ， 同 时 图 片 多 为 第 三 方 上 传 ， 图 片 质量 不 统一 ， 产 品 数量 较 多 ， 故 采用 
瀑布 流 提升 了 界面 的 趣味 性 ， 避 免 用 户 视觉 疲劳 。 


什么 时 候 使 用 ? 


两 列 瀑布 流 布局 和 两 列 网 格 布局 的 使 用 场景 类 似 ， 唯 一 区 别 就 是 两 列 网 格 布局 在 产品 数量 
少 或 用 户 目 标明 确 时 采用 ; 而 瀑布 流 多 用 于 用 户 目 标 不 明确 ， 同 时 产品 数量 多 ， 可 以 无 限 
下 滑 的 时 候 。 


拼图 布局 


拼图 布局 中 ， 头 部 常 以 一 张大 banner 的 形式 出 现 ， 下 面 是 由 几 张 图 片 以 各 种 拼图 形式 呈 
现 。 一 般 来 说 下 面 展 示 的 信息 都 是 和 头 部 图 相关 的 商品 ， 适 合 平台 主动 推荐 的 商品 列表 ， 


如 下 图 所 示 : 
1 Er 
省 28 寸 纯 PC- 甸 要 ”( 非 全 ， 
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两 列 拼图 布局 严 选 -人 和 气 推荐 


优点 是 ， 采 用 杂志 式 排版 ， 样 式 上 更 活泼 美观 ; 产品 主 次 表达 更 清晰 ， 通 过 图 片 占 比 大 小 
就 可 以 确定 主要 和 次 要 信息 。 


缺点 是 ， 图 片 一 般 有 大 有 小 ， 小 的 也 很 容易 被 忽略 ; 另外 该 样式 编辑 成 本 高 ， 往 往 需要 单 
独 推荐 。 
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小 红 书 -推荐 


小 红 书 的 推荐 页 面 可 看 成 是 专题 页 ， 采 用 拼图 的 形式 展现 ， 将 重要 信息 放 到 大 图 上 ， 次 要 
信息 放 到 小 图 上 ， 引 导 用 户 购买 。 


什么 时 候 使 用 ? 


两 列 拼 图 布局 在 列表 中 使 用 较 少 ， 因 为 不 规则 的 拼图 会 导致 维护 成 本 过 高 ， 同 时 小 图 片 很 
容易 被 忽略 ， 因 此 多 用 于 推荐 页 面 中 ， 图 片 由 编辑 经 过 处 理 之 后 再 进行 上 传 。 


三 列 网 格 布局 


三 列 网 格 布局 是 将 屏幕 一 分 为 三 进行 展示 ， 也 可 以 叫 宫 格 布局 。 由 于 模块 比较 小 ， 因 此 主 
要 以 图 片 展示 为 主 ， 文 字 信息 一 般 只 有 简单 的 标题 ， 适 合用 在 用 户 需 求 不 明确 的 页 面 ， 如 
下 图 所 示 : 
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网 易 严 选 


优点 是 ， 排 版 的 界面 利用 率 高 ， 一 屏 可 展示 的 产品 数量 最 多 ， 利 于 用 户 快速 浏览 选择 自己 


感 兴趣 的 产品 。 


缺点 是 ， 图 片 展示 尺寸 小 、 质 量 低 ， 文 字 信息 展示 简单 ， 对 比 性 较 弱 ， 界 面 的 趣味 性 和 新 


鲜 感 都 比较 差 。 
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以 NOTHING-- 日 榜 和 哗 哩 哗 哩 - 番 剧 为 例 ， 用 户 进来 主要 是 为 了 看 看 有 没有 自己 感 兴趣 的 
内 容 ， 采 用 三 列 网 格 布局 可 以 展示 更 多 的 内 容 ， 帮 助 用 户 快速 浏览 。 


什么 时 候 使 用 ? 


如 果 你 的 产品 只 是 为 了 展示 更 多 的 信息 ， 不 需要 通过 图 片 进行 对 比 时 ， 可 采用 三 列 网 格 
布局 。 


画 重点 


( 1 ) 当 用 户 需求 明确 时 ， 需 要 选择 适合 高 效 对 比 的 布局 方式 ， 推 荐 使 用 列表 布局 、 两 列 
网 格 布局 、 两 列 瀑布 流 布局 ， 其 中 列表 布局 适合 以 文字 对 比 为 主 的 商品 ; 两 列 网 格 布 局 和 
瀑布 流 布 局 适合 以 图 片 为 主 的 商品 。 


( 2 ) 当 用 户 需求 不 明确 时 ， 就 需要 根据 产品 的 目标 进行 选择 。 产 品目 标 是 体现 品牌 性 或 


推荐 商品 ， 使 用 大 图 网 格 布局 和 拼图 布局 ; 当 产 品目 标 是 想 快速 促成 交易 ， 方 便 用 户 对 
比 ， 推 荐 使 用 两 列 瀑布 流 布局 ; 当 产 品目 标 只 是 展示 界面 ， 推 荐 使 用 三 列 网 格 布局 。 


(3 ) 当 产 品 数 量 较 少 时 ， 推 荐 使 用 两 列 网 格 布局 、 大 图 网 格 布局 。 其 中 大 图 网 格 布局 适 
合 图 片 质量 高 ， 有 专门 编辑 进行 维护 的 产品 ; 两 列 网 格 布 局 要 求 相 对 少 很 多 。 反 之 ， 当 产 
品 数量 较 多 上 时， 推荐 使 用 两 列 瀑布 流 布局 、 三 列 网 格 布局 。 


参考 资料 
无 线 工 坊 . 方寸 指 间 [M]. 北京 : 电子 工业 出 版 社 ，2014 
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08 按钮 


文 / 刘 芳 


按钮 设计 看 似 简单 ， 只 需要 画 个 矩形 框 然 后 填 色 即 可 ， 但 其 实 按钮 的 功能 不 同 ， 设 计 方式 
也 有 差异 。 另 外 ， 按 钮 的 一 些 设计 细节 很 容易 被 忽略 。 本 文 主要 从 按钮 功能 类 型 和 设计 要 
点 两 个 方面 入 手 ， 对 按钮 设计 进行 全 面 的 解析 。 


按钮 功能 类 型 


按钮 主要 包括 行为 召唤 按钮 、 悬 浮 按钮 、 标 签 按钮 、 表 格 按钮 、 开 关 按 钮 ， 其 功能 不 同 设 
计 方 式 也 不 同 。 


1. 行为 召唤 按钮 

行为 召唤 ( Call To action，CTA ) 按钮 的 目的 是 通过 设计 诱导 或 激励 用 户 点 击 ， 从 而 实 
现 产品 的 诉求 。 主 要 包括 诱导 购买 、 订 阅 关注 、 利 益 诱导 、 文 字 诱导 四 种 。 

1 ) 诱导 购买 


当 行 为 召唤 的 目的 是 诱导 购买 时 ， 按 钮 的 设计 在 颜色 、 形 状 、 样 式 上 都 需要 突出 。 要 让 按 
钮 看 上 去 可 点 击 ， 让 用 户 进来 第 一 眼 就 能 知道 该 按钮 的 用 途 ， 如 下 图 所 示 : 


CE oD 
美 团 外 卖 淘宝 -详情 


美 团 外 卖 的 结算 按钮 颜色 采用 黑 黄 对 比 、 形 状 采 用 具有 亲和力 的 圆 角 ， 在 样式 上 加 入 投影 
的 同时 加 入 送 餐 员 的 元 素 ， 配 上 小 红 点 ， 再 加 上 价格 诱导 ， 让 用 户 可 以 直观 看 到 优惠 了 多 
少 钱 ， 促 使 用 户 进一步 操作 。 


淘宝 详情 的 “加 入 购物 车 ”和 “马上 抢 ”是 一 个 组 合 按钮 ， 作 为 行为 召唤 按钮 可 以 明确 地 
看 到 ， 其 从 颜色 、 形 状 、 样 式 都 能 够 让 用 户 快速 注意 到 。 
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2 ) 订阅 关注 

当 行 为 召唤 的 目的 是 订阅 关注 时 ， 其 重要 程度 相 比 诱导 购买 低 很 多 ， 但 是 在 设计 时 仍然 需 
要 考虑 一 个 问题 : 用 户 关注 更 重要 还 是 用 户 阅 读 内容 更 重要 。 当 内 容重 要 时 ， 按 钮 的 设计 
需要 弱化 处 理 ， 例 如 优酷 视频 ; 当 点 击 关注 重要 时 ， 按 钮 的 设计 需要 强化 处 理 ， 例 如 土豆 
视频 ， 如 下 图 所 示 : 


© © A 
《 流 当 地球》 经 费 不 足 , 却 破 40 亿 荣 登 电影 排 
行 酸 ,我 们 赢 的 是 口碑 ! 
多 大 成 本 而 投资 漠 请 当红 一 线 ; 
-a ~ mm 人 CR 昌林 时针 》 旺 的 ~ 
ny: 的 
人 @ 反 人 类 综艺 不 笑 难受 ED 
本  - aa 
优酷 视频 -内 容重 要 土豆 视频 -关注 重要 


优酷 视频 星球 页 面 的 目的 主要 是 引导 用 户 去 阅读 内 容 ， 感 兴趣 你 就 关注 ， 因 此 在 设计 时 对 
关注 按钮 进行 了 弱化 处 理 ， 让 按钮 和 界面 融合 。 


土豆 视频 关注 界面 的 目的 主要 是 引导 用 户 关注 。 因 此 按钮 设计 较为 明显 ， 采 用 黄色 填充 加 
图 标 引 导 ， 在 视觉 上 和 产品 内 容 形 成 强烈 对 比 。 
3 ) 利益 诱导 


当 行 为 召唤 的 目的 是 利益 诱导 时 ， 可 以 考虑 在 颜色 、 形 状 、 图 标 、 诱 导 文字 等 方面 设计 ， 
引导 用 户 点 击 ， 如 下 图 所 示 : 


(SE ED 
国 二 一 人 WW 和 亿 
必 收 任务 


图 看 看 的 门 挫 检 芭 © 和 到 


ro 加 分 1 人 由 和 


大 众 点 评 -每 日 福利 腾讯 视频 -doki 


大 众 点 评 领 奖 按钮 明显 比 赚 积 分 的 层级 高 ， 因 此 为 了 突出 领 奖 按钮 ， 采 用 了 色 块 设计 的 样 
式 ， 同 时 赚 积 分 按钮 采用 描 边 设计 进行 弱化 处 理 。 
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腾讯 doki 打 榜 页 面 冲 榜 的 重要 层级 最 高 ， 因 此 在 设计 时 不 仅 采 用 了 色 块 、 加 入 了 动 效 图 
标 ， 同 时 还 加 入 了 诱导 文字 ， 让 按钮 更 明显 ， 诱 导 用 户 点 击 ， 其 他 按钮 则 采用 描 边 样式 弱 
化 处 理 。 


4 ) 文字 诱导 

文字 诱导 简单 来 说 就 是 通过 文字 ， 诱 导 用 户 进行 下 一 步 操作 ， 多 用 于 空 页 面 、 活 动 页 面 
中 ， 因 此 在 设计 时 采用 简单 的 色 块 填充 即 可 。 如 果 该 页 面 为 活动 页 面 ， 也 可 增加 渐变 或 投 
影 样式 ， 让 按钮 更 有 空间 感 ， 进 而 突出 按钮 ， 如 下 图 所 示 : 


1 中国 移动 全 下 午 5:51 750 + 中 国光 动 全 上 午 1254 +0; 


学 习 计划 < 我 的 攻略 


我 创建 的 攻 咯 我 收藏 的 攻略 


而 
怕 什 么 真理 无 穷 , 进 一 十 有 一寸 的 欢喜 = 
胡适 

SN 


ED 和风 
下 次 查找 更 方便 
© 日 Bg 四 2& 要 太公 地 站 
得 到 大 众 点 评 


得 到 的 “学 习 计划 ”界面 为 空 时 ， 为 了 促进 用 户 进行 下 一 步 操作 ， 它 的 按钮 文字 “开始 制 
定 学 习 计划 ”直接 诱导 用 户 制定 ， 同 时 其 按钮 采用 重要 程度 较 高 的 色 块 加 投影 的 方式 ， 诱 
导 用 户 点 击 。 


大 众 点 评 “ 我 的 攻略 ”界面 为 空 时 ， 为 了 让 用 户 创建 攻略 ， 它 的 按钮 文字 “我 也 要 创建 攻 
略 ” 直 接 诱 导 用 户 创建 ， 同 时 其 按钮 采用 渐变 填充 的 方式 ， 诱 导 用 户 点 击 。 


2. 悬浮 按钮 
悬浮 按钮 是 Android 应 用 中 最 常见 的 一 个 控件 。 不 过 随 着 Android 和 iOS 规 范 的 不 断 融 合 ， 
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在 iOS 中 也 经 常会 看 到 各 种 各 样 的 悬浮 按钮 。 在 设计 上 悬浮 按钮 应 该 采用 显眼 的 颜色 ， 以 
抓 住 用 户 的 注意 力 ， 同 时 它 应 该 是 积极 正 向 的 交互 ， 例 如 创建 、 分 享 、 探 索 等 ， 如 下 图 
所 示 : 


动 xm 和 


早餐 饼 新 绾 法 ， 比 手 抓 讲 做 法 简单 ， 比 鸡蛋 
饼 好 吃 ， 老 疲 4 个 不 够 吃 


UC 浏览 器 -正常 UC 浏览 器 -展开 


UC 浏览 器 的 悬浮 按钮 采用 蓝 色 背 景 和 白色 添加 图 标 ， 具 有 很 强 的 提示 作用 ， 点 击 按钮 即 
可 呼出 对 应 的 发 布 图 文 或 者 视频 的 功能 。 


3. 标签 按钮 

标签 按钮 往往 呈 多 个 出 现 ， 在 使 用 时 可 以 看 成 一 种 筛选 条 件 ， 采 用 该 设计 方式 可 减少 用 户 
操作 步骤 ， 提 高 操作 效率 。 不 过 标签 的 重要 程度 仍然 较 低 ， 在 设计 时 需要 弱化 处 理 ， 如 下 
图 所 示 : 


支付 宝 -保险 


支付 宝 投保 页 面 ， 为 了 帮助 用 户 快速 做 出 选择 ， 采 用 了 标签 的 设计 方式 。 由 于 其 重要 程度 
不 及 “我 要 投保 ”高 ， 因 此 在 设计 时 默认 用 描 边 处 理 ， 选 中 后 采用 较 浅 的 色 块 填充 。 


转 转 产品 列表 页 ， 筛 选 条 件 下 方 也 采用 了 标签 设计 ， 由 于 用 户主 要 目的 还 是 浏览 商品 ， 因 
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此 标签 按钮 样式 默认 采用 浅 灰 色 ， 选 中 效果 为 较 浅 的 色 块 加 描 边 。 


4. 表格 按钮 


表格 按钮 是 由 一 个 白色 网 格 加 文字 组 成 ， 从 视觉 上 看 和 页 面 融 为 一 体 ， 特 别 不 突出 。 因 此 
多 在 个 人 中 心 设置 页 面 想 要 弱化 按钮 的 情况 使 用 ， 如 下 图 所 示 : 


微 信 淘 票 票 


微 信 设 置 界面 的 “切换 账号 ”和 “退出 登录 ”由 于 不 是 核心 操作 按钮 ， 同 时 为 了 和 界面 表 
格 协 调 ， 设 计时 采用 表格 按钮 将 其 弱化 处 理 。 


淘 票 票 影 院 介绍 页 面 底部 设置 了 “给 影院 提 建 议 ” 和 “信息 纠 错 ”， 很 明显 不 需要 引导 用 
户 操作 ， 设 计时 采用 表格 按钮 将 其 弱化 处 理 。 


5. 开关 按钮 
开关 按钮 是 两 种 相互 对 立 状态 间 的 切换 ， 多 用 于 功能 的 开启 和 关闭 。 当 按钮 开启 后 可 能 还 
会 带 来 其 他 的 相应 操作 。 开 关 按 钮 多 用 在 设置 界面 ， 但 是 也 有 很 多 App 将 其 用 到 其 他 界面 
中 ， 如 下 图 所 示 : 


字 可 在 入 住 完成 10 天 内 补 全 信息 


美 团 外 卖 小 猪 短 租 


美 团 外 卖 提交 订单 界面 中 的 “号 码 保护 ”就 采用 了 开关 按钮 ， 相 比 其 他 滑动 选择 的 交互 状 
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态 来 说 ， 开 关 按 钮 无 疑 可 以 减少 操作 步骤 ， 提 高 操作 效率 。 


小 猪 短 租 提交 订单 界面 中 的 “需要 发 票 ”也 采用 了 开关 按钮 ， 当 开启 按钮 会 展开 提示 你 去 填 
写 信息 ， 当 关闭 按钮 提示 信息 隐藏 ， 相 比 于 其 他 选择 控件 ， 这 里 用 开关 按钮 更 为 合适 。 


按钮 设计 要 点 


上 面 总 结 了 五 大 功能 按钮 的 表现 形式 和 使 用 场景 ， 此 外 ， 要 设计 出 一 个 引导 性 好 的 按钮 ， 
还 需要 重视 一 些 细节 ， 例 如 颜色 、 形 状 、 状 态 、 位 置 等 。 


1. 颜色 


颜色 是 最 容易 感知 到 的 对 比方 式 ， 不 同 的 颜色 会 给 用 户 不 一 样 的 心理 预期 。 在 设计 时 ， 按 
钮 颜色 主要 有 主题 色 、 强 调 色 、 辅 助 色 。 主 题 色 多 用 于 需要 强调 的 行为 召唤 按钮 、 悬 浮 按 
钮 、 开 关 按 钮 中 ; 强调 色 多 用 于 需要 拉 开 主 次 关系 的 按钮 组 中 ， 一 般 采 用 主题 色 的 对 比 色 
彩 或 者 邻近 色 ; 辅助 色 多 用 于 默认 状态 或 不 可 点 击 的 状态 中 ， 如 下 图 所 示 : 


Keep- 主 题 色 UC 浏 览 器 -强调 色 天 猫 -辅助 色 


Keep 首 页 的 “查看 我 的 训练 计划 ”按钮 直接 采用 主题 色 ， 不 仅 可 以 起 到 很 好 的 强调 作用 ， 
同时 和 界面 风格 也 比较 协调 ; UC 浏 览 器 小 视频 的 “我 来 拍 ” 按 钮 采用 邻近 色 绿色 渐变 来 强 
调 ， 引 导 用 户 拍摄 小 视频 ; 天 猫 选 择 尺码 标签 时 ， 按 钮 的 默认 状态 采用 辅助 色 灰 色 来 突出 选 
中 状态 。 
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2. 形状 
在 设计 按钮 时 ， 需 要 根据 整个 界面 风格 设计 合适 的 形状 ， 主 要 有 直角 、 小 圆 角 、 全 圆 角 、 
异形 四 种 样式 。 


直角 的 含义 : 严谨 、 力 量 、 高 端 。 适 用 于 金融 类 、 奢 侈 品类 产品 中 ， 让 产品 给 人 严谨 、 安 
全 、 高 端的 感觉 ， 例 如 寺 库 的 按钮 设计 。 


小 圆 角 的 含义 : 稳定 、 中 性 。 适 用 于 用 户 跨度 较 大 的 常规 类 产品 中 ， 例 如 微 信 的 按钮 设计 。 


全 圆 角 的 含义 : 活泼 、 年 轻 、 安 全 。 适 用 于 儿童 类 、 年 轻 类 、 娱 乐 类 、 购 物 类 的 产品 中 ， 
提升 亲和力 ， 拉 近 用 户 的 距离 ， 例 如 土豆 的 按钮 设计 。 


异形 按钮 的 含义 : 不 稳定 、 活 泌 、 另 类 。 适 用 于 需要 用 户 做 出 选择 的 场景 中 ， 例 如 招商 银 
行 “ 话 题 PK” 的 按钮 设计 。 


< a a 二 手机 快捷 生 录 和 


PA 
RE 

aacacacee ‘arosetere 
Ee 话 时 PK 


eens 598542 : 站 一 亿 人 届 友 轿 三 天 可 内， 你 是 基 中 一 和 吧 ) 
及 信和 9S 二 和 竺 入 ey 


Lean 热门 活动 
简 exeemmva av 日 
8 @ dy 之 由 辣 maems aa 自 
@ ooma anna 拱 丰 这 再 | 要 多 夸 观 a [= © 扬 & 


寺 库 -直角 微 信 -小 圆 角 土豆 -全 圆 角 招商 银行 -异形 
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寺 库 是 奢侈 品类 电 商 ， 它 的 按钮 采用 直角 设计 ， 刚 好 可 体现 奢侈 品 的 高 端 性 ; 微 信 的 用 户 


群体 上 到 七 八 十 岁 ， 下 到 几 岁 ， 其 年 龄 范围 广 ， 因 此 采用 稳重 的 小 


圆 角 较为 稳妥 ; 土豆 短 


视频 用 户 群体 年 轻 活泼 ， 因 此 采用 全 圆 角 较为 适合 ; 招商 银行 话题 PK 采用 异形 的 设计 ， 
会 给 用 户 不 稳定 和 另类 的 感觉 ， 从 而 引导 用 户 参与 。 


3. 状态 


在 部 分 界面 设计 中 需要 考虑 按钮 的 状态 设计 ， 从 而 提高 用 户 操作 的 流畅 度 。 移 动 端 完整 的 
系统 按钮 可 以 分 为 正常 状态 、 按 压 状态 、 禁 用 状态 。 


”" CHEZEED 


禁用 #FF7D11 不 透明 度 45% 


#FF7D11 加 15% 黑 色 蒙 层 


按钮 状态 


其 中 ， 正 常 状 态 ( 包括 加 载 状态 ) 展示 的 是 App 的 主 色 ; 按压 状态 在 正常 状态 的 基础 上 晋 
加 15% 的 黑色 ; 禁用 状态 一 般 是 灰色 或 者 将 正常 状态 的 透明 度 降低 至 45%， 该 状态 多 用 于 


提交 表单 按钮 ， 例 如 登录 、 注 册 、 转 账 等 ， 如 下 图 所 示 : 


中 国 动 全 ET 
< 苇 入 


,| 恩人 于 于 财 妆 | 


¥ 


8883) 
® 2 ) 


150. 中 


EE < 


京东 金融 
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京东 金融 转账 页 面 ， 当 未 输入 转账 金额 时 ， 按 钮 禁用 为 灰色 ; 当 输 入 金额 时 按钮 为 正常 状 
态 。 在 操作 中 可 以 发 现 京东 金融 没有 按压 状态 ， 这 是 因为 随 着 网 络 的 发 展 ， 宽 带 速度 越 来 
越 高 ， 按 压 状 态 显得 没有 必要 。 


4. 位 置 


位 置 往往 对 主 操作 按钮 较为 重要 ， 在 设计 时 需要 以 引导 用 户 、 方 便 用 户 点 击 为 目的 。 主 操 
作 按 钮 的 位 置 主要 有 三 种 ， 即 固定 在 底部 、 页 面 跟随 、 将 希望 用 户 操作 的 按钮 置 于 按钮 组 
右 侧 。 


Keep- 固 定 底部 饿 了 么 -页 面 跟随 。 小米 商城 - 置 于 按钮 组 右 侧 


根据 费 茨 定律 可 知 ， 按 钮 位 置 越 近 用 户 所 需 的 时 间 就 越 得， 因此 Keep 的 开通 会 员 按钮 置 
于 底部 ， 方 便 用 户 快速 操作 。 


饿 了 么 的 新 增 地 址 界面 中 ， 按 钮 跟随 在 信息 后 面 ， 用 户 看 完 信息 即 可 点 击 保 存 。 需 要 注 
意 ， 当 表单 信息 较 多 时 ， 也 推荐 采用 固定 到 底部 的 方式 减 短 用 户 操作 成 本 。 


小 米 商城 详情 页 的 “加 入 购物 车 ”按钮 置 于 界面 右 人 出， 其 一 是 为 了 视觉 平衡 ， 其 二 是 符合 
人 先 点 右 侧 按钮 的 使 用 习惯 。 


画 重 点 


(1 ) 当 行 为 召唤 的 目的 是 诱导 购买 时 ， 按 钮 的 设计 不 管 从 颜色 、 形 状 还 是 样式 都 需要 突 
出 。 让 按钮 看 上 去 可 点 击 ， 让 用 户 进来 第 一 眼 就 能 知道 该 按钮 的 用 途 。 


(2 ) 当 行为 召唤 的 目的 是 点 击 按钮 时 ， 按 钮 需要 强化 处 理 ， 例 如 采用 主题 色 、 强 调 色 、 


73 


74 


UI 那些 事 儿 : 新 手 设计 师 的 成 长 之 路 


添加 图 标 等 方式 ; 当 目 的 是 浏览 内 容 时 ， 按 钮 可 弱化 处 理 ， 例 如 按钮 采用 浅 色 、 灰 色 。 


( 3 ) 提交 表单 按钮 可 分 别 设计 正常 、 禁 用 状态 ， 避 免 用 户 错 误 操 作 。 


( 4 ) 当 需 要 用 户 快速 操作 时 ， 将 主 操作 按钮 固定 在 界面 的 底部 ; 按钮 组 中 希望 用 户 点 击 
的 按钮 则 置 于 右 侧 。 


参考 资料 
学 习 按钮 设计 ， 看 这 篇 就 够 了 ! http://t.cn/Rn86MOJ 


7 个 按钮 设计 基本 规则 ”http://t.cn/Eq6mG8R 
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09 标签 


文 / 姜 正 
标签 是 日 常设 计 中 使 用 频率 最 高 的 组 件 之 一 ， 它 功能 强大 、 使 用 场景 多 样 化 ， 从 而 深 受 设 
计 师 们 的 喜爱 。 优 秀 的 标签 设计 能 够 帮助 产品 传递 准确 的 信息 ， 完 成 当前 的 业务 目标 。 


标签 的 定义 


标签 是 事物 抽象 出 来 的 定义 ， 方 便 用 户 标记 和 机 器 识别 。 这 里 需要 理解 标签 在 用 户 行为 层 
面 的 使 用 ， 用 户 最 终 通 过 标签 进行 信息 传递 和 交互 操作 。 


标签 的 特征 
标签 的 主要 特征 有 : 

@ 开放 性 ， 即 所 有 用 户 可 见 。 

@ 。 轻 量化 ， 主 要 以 关键 词 的 形式 呈现 。 


@ 。 参与 性 ， 即 标签 可 以 由 用 户主 动 生成 。 
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标签 的 作用 
标签 主要 有 两 个 作用 :一 是 信息 传递， 二 是 交互 操作 。 


1. 信息 传递 


信息 传递 是 标签 设计 的 关键 ， 无 论 是 图 形 标 签 还 是 文字 信息 标签 ， 首 要 的 任务 都 是 正确 地 传 
递 信息 ， 只 有 这 样 才能 让 用 户 产生 正确 的 联想 ， 进 而 执行 下 一 步 操 作 。 


可 以 这 样 理解 ， 标 签 信息 是 为 了 满足 用 户 的 隐 性 需求 ， 当 用 户 在 犹 殉 是 否 要 进行 下 一 步 操 
作 的 时 候 ， 标 签 信息 可 以 加 强 用 户 的 需求 欲望 ， 促 进 完 成 下 一 步 操作 。 


结合 上 述 标签 轻 量化 的 特征 ， 标 签 都 是 由 提取 的 关键 词 或 图 形 组 成 。 根 据 产品 属性 和 业务 
的 不 同 ， 关 键 词 的 维度 也 有 所 不 同 。 例 如 ， 偏 向 内 容 的 平台 一 般 都 会 从 内 容 中 提取 关键 
词 ， 来 达到 为 其 他 同属 性 内 容 引流 的 目的 。 


提取 关键 记 点 击 中 转 其 他 
内 容 


而 电 商 快 销 类 平台 则 是 为 了 达到 业务 目标 ， 尽 量 突 出 与 用 户 利益 相关 的 优惠 活动 。 例 如 将 
热 销 、 精 选 、 满 减 等 目的 性 特别 强 的 词语 作为 关键 词 。 


@QOOOOO 


2. 交互 操作 
标签 设计 的 最 终 目的 其 实 是 帮助 用 户 完成 交互 操作 ， 其 主要 形式 分 为 可 点 击 交 互 和 不 可 点 
击 交互 两 种 。 


可 点 击 交互 的 标签 一 般 多 用 于 产品 内 部 流量 分 发 、 为 其 他 同属 性 内 容 导 流 ， 点 击 标签 进入 
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其 他 页 面 ; 不 可 点 击 交互 的 标签 则 是 辅助 业务 模块 ， 通 过 关键 词 信息 刺激 用 户 点 击 业务 模 
块 。 如 果 用 户 对 于 是 否 点 击 该 业务 模块 还 心 存 犹 移 ， 这 个 时 候 就 需要 标签 设计 作为 助力 
剂 ， 正 确 地 传递 关键 信息 ， 刺 激 用 户 点 击 。 


标签 的 使 用 场景 


标签 的 使 用 场景 较为 广泛 ， 这 里 归纳 总 结 了 几 种 常见 于 现 有 App 的 使 用 场景 。 
1. 产品 展示 和 运营 活动 
产品 展示 和 运营 活动 是 标签 最 经 常 出 现 的 两 个 场景 ， 因 为 这 两 个 场景 都 具有 很 强 的 目的 性 。 


产品 展示 的 目的 是 为 了 提高 用 户 的 点 击 购买 率 ， 所 以 除了 商品 基本 信息 之 外 ， 需 要 添加 更 
加 符合 用 户 利益 的 关键 词 标签 来 吸引 用 户 ， 辅 助 其 完成 点 击 跳 转 的 任务 。 这 种 使 用 场景 在 
电 商 平台 中 十 分 常见 ， 这 里 以 小 红 书 为 例 ， 如 下 图 所 示 : 


小 红 书 
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小 红 书 的 商品 展示 模块 会 将 “折扣 信息 ”和 “ 自 营 ” 等 标签 放 在 底部 ， 一 方面 刺激 用 户 直 
接点 击 购买 ， 另 一 方面 方便 用 户 根据 关键 词 去 判断 选择 哪 种 购买 的 方式 会 更 加 实惠 。 


运营 活动 则 更 多 是 为 了 激发 用 户 的 参与 感 ， 需 要 从 多 方面 赢得 用 户 的 信任 。 一 般 情况 下 会 
通过 关键 词 加 强 与 用 户 之 间 的 情感 和 利益 联系 ， 从 而 促使 用 户 在 短 时 间 之 内 做 出 决定 。 这 
里 以 下 厨房 为 例 : 


| 中 国联 通 令 下 午 5:29 @ 7 100% + 
< 减 脂 专栏 呈 


¥19.9/21 餐 


用 36 道 美食 ， 揭 开 减 ”跟着 Sunny 打 造 你 的 健 


下 厨房 


下 厨房 的 活动 区 通过 添加 “夏秋 特辑 ”的 标签 ， 来 满足 用 户 潜在 对 夏秋 养生 的 需求 ; 通过 
底部 添加 的 “专栏 ”标签 来 提高 活动 的 专业 度 ， 赢 得 用 户 的 信任 。 下 厨房 从 潜在 需求 和 专 
业 的 角度 促进 了 用 户 点 击 参与 的 欲望 。 


2. 模糊 推荐 

用 户 进入 一 个 新 的 场景 的 时 候 ， 还 没有 明确 的 目的 ， 这 个 时 候 需 要 提供 “兴趣 标签 ”来 引 
导 用 户 根据 平时 自己 的 兴趣 爱好 选择 标签 ， 产 品 再 基于 用 户 选择 的 标签 来 推荐 用 户 可 能 感 
兴趣 的 内 容 ， 避 免 用 户 因为 内 容 不 符合 喜好 而 直接 关 掉 页 面 。 最 常见 的 使 用 场景 就 是 兴趣 
标签 页 ， 以 虎 扑 为 例 : 
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社区 大 爆炸 ! 无 数 新 奇 好 玩 的 话题 


退 筒 找到 感 兴趣 的 内 容 


| 步行 街 
不 的 新 


| 娱乐 


| 搞笑 


进入 全 新 社区 > 


虎 扑 


在 进入 虎 扑 首页 时 ， 通 过 “兴趣 标签 ” 流 的 形式 引导 部 分 目的 不 明确 的 用 户 来 选择 自己 感 
兴趣 的 标签 ， 进 入 自己 感 兴趣 的 话题 当中 ， 满 足 了 用 户 的 潜在 需求 。 


3. 内 容 导 流 

为 平台 内 其 他 内 容 进 行 导 流 也 是 标签 重要 的 功能 之 一 ， 常 见 内 容 导 流 的 方式 有 两 种 : 一 种 
是 文 末 出 现 关 联 性 标签 ， 另 一 种 则 是 搜索 时 出 现 关联 推荐 。 

当 用 户 浏览 完 当 前 的 内 容 后 ， 会 有 浏览 其 他 相关 联 内 容 的 潜在 需求 ， 这 个 时 候 可 以 通过 从 
文中 提取 “关键 词 ”标签 来 满足 用 户 这 一 需求 。 一 般 关联 标签 会 出 现在 文 示 的 底部 ， 用 户 
在 阅读 完 文章 之 后 根据 自己 的 需求 进行 选择 点 击 。 我 们 以 简 书 为 例 : 
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人 FFss4 了 ocx 


链接 : 
http://www xinmel6.com/contenthtml? 
newsld=29523 


来 源 : 新 媒 之 家 
EEDICESOIEECD 
®o 
新 年 大 吉 1 
IE 
(GE 


陈冠希 夫妇 度假， 素颜 大 秀 恩 爱 , 
网 友 : 不 扫 架 子 ， 不 庶 伪 ， 好 评 1 
和 WEN 


简 书 


简 书 通过 从 内 容 中 提取 相关 的 “关键 词 ”标签 ， 满 足 用 户 浏览 同属 性 内 容 的 潜在 需求 ， 同 
时 达到 了 为 平台 内 其 他 内 容 引流 的 目的 。 


搜索 时 出 现 关 联 性 推荐 是 产品 为 内 容 进行 导 流 的 重要 方式 之 一 。App 会 根据 用 户 日 常 浏览 
的 数据 和 近期 的 热点 进行 关键 词 推荐 。 这 种 场景 下 ， 通 常会 弱化 标签 的 视觉 冲击 力 ， 这 样 
做 既 不 影响 用 户 的 主观 性 搜索 ， 同 时 又 为 用 户 提供 了 推荐 选择 。 我 们 以 转 转 为 例 : 


Ba 下 于 559 四 Ti00x 
宝贝 ~ i 
推荐 搜索 
ee 653。 paqsn 网 归 妆 2 本 
历史 搜索 
ps4 机 为 于。 pn 
mee mens 2 
妆 叶 sn 入 并 多 
疾 叶 领 基 a Sn 
加 莫名 他 养 
Iiphonex256g NF 
phone’ 全 phone iphone 
着 砂 蔚 全 2 间 。。 关 针对 区 
苹果 无 线 乌 盘 
芋 洗 键 骨 


转 转 
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转 转 的 搜索 界面 会 显示 “推荐 搜索 和 “历史 搜索 ”， 以 标签 的 形式 来 展示 平台 内 的 热门 
商品 ， 从 而 达到 为 其 他 商品 导 流 的 目的 ， 促 使 平台 内 部 的 流量 分 发 平衡 。 


4. 筛选 分 类 

通过 标签 进行 筛选 分 类 能 帮助 用 户 更 加 精准 地 选择 所 需要 的 内 容 。 这 样 用 户 可 以 自主 地 在 
一 定 范围 内 浏览 自己 感 兴趣 的 内 容 ， 避 免 耗 费 大 量 的 精力 和 时 间 去 浏览 无 关 信息 ， 提 高 了 
用 户 的 阅读 效率 。 以 淘宝 的 评论 区 域 为 例 : 


按 分 类 看 评价 


:= ii em 


10(9) 。 有 图 123) 。 现 才 3) 。 正品 (3) 


淘宝 


淘宝 的 评论 区 域 通 过 算法 将 评论 的 内 容 分 为 几 个 不 同 的 维度 ， 再 通过 标签 的 形式 展现 ， 用 
户 可 以 根据 自己 的 实际 需求 进行 筛选 ， 浏 览 自 己 感 兴趣 的 评论 。 这 样 帮 助 用 户 提高 了 浏览 
的 效率 ， 减 少 了 用 户 在 时 间 、 精 力 上 的 消耗 ， 节 约 了 成 本 。 


5. 填写 评论 

传统 的 评论 区 域 需要 用 户 填写 大 量 的 文字 ， 对 于 工具 类 型 的 App 而 言 这 是 一 项 高 成 本 的 
操作 ， 但 是 我 们 可 以 根据 用 户 常用 的 评论 数据 ， 预 设 成 可 点 击 的 标签 形式 ， 用 户 可 以 根据 
实际 的 情况 进行 选择 关键 词 标签 ， 代 蔡 手 动 录入 评论 。 这 样 减少 了 用 户 操作 的 交互 路 径 ， 
极 大 地 节约 了 用 户 的 时 间 、 精 力 投入 。 

例如 ， 日 常生 活 中 我 们 使 用 工具 类 型 的 App 完成 某 项 操作 任务 之 后 ，App 会 主动 
提示 我 们 进行 评价 ， 这 时 我 们 就 可 以 通过 选择 标签 的 形式 进行 评论 。 这 里 以 滴 滴 出 行 
为 例 : 
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不 商 全 访 本 的 车 EEC 


滴 滴 出 行 


滴 滴 在 完成 行程 和 支付 环节 之 后 ， 会 自动 弹出 评价 页 面 ， 而 这 个 时 候 用 户 通常 是 没有 过 多 
的 精力 去 处 理 这 些 事情 的 。 为 了 提高 用 户 的 评价 数量 ， 滴 滴 将 常用 的 评价 提炼 成 关键 词 ， 
用 户 可 以 通过 点 击 预 设 的 评价 标签 来 完成 评论 任务 ， 这 样 能 有 效 减少 用 户 所 要 消耗 的 精 
力 ， 优 化 用 户 体验 ， 提 高 信息 采集 率 。 


画 重点 
( 1 ) 标签 是 事物 抽象 出 来 的 定义 ， 方 便 用 户 标记 和 机 器 识别 ， 它 的 主要 特征 是 开放 性 、 
轻 量 化 、 参 与 性 。 


(2 ) 标签 的 主要 作用 是 信息 传递 和 交互 操作 。 标 签 通过 提炼 的 图 形 或 者 关键 词 进行 信息 
的 传递 ， 用 户 再 根据 信息 结合 自己 的 实际 需求 进行 交互 操作 。 


( 3 ) 标签 的 使 用 场景 较为 广泛 ， 主 要 出 现 的 场景 有 : 产品 展示 和 运营 活动 、 模 糊 推荐 、 
内 容 导 流 、 筛 选 分 类 、 填 写 评论 。 


参考 资料 
关于 标签 以 及 推荐 的 设计 ? https://dwz.cn/6tOnzi1r 


标签 设计 、 理 查 德 塞 勒 和 Dark Pattern https://dwz.cn/WKL5SOBa 
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10 ”聊天 气泡 框 常见 问题 


文 / 刘 芳 


聊天 界面 看 似 比 较 简单 ， 但 是 新 人 往往 会 忘记 给 聊天 气泡 框 做 适 配 ， 最 后 导致 落地 效果 参 
差 不 齐 ， 增 加 开发 和 验收 成 本 。 本 文 主要 和 大 家 分 享 聊天 气泡 框 的 常见 问题 和 对 应 的 解决 
方案 。 


新 手 常见 问题 


平时 我 们 知道 聊天 气泡 框 会 随 文字 多 少 变化 ， 宽 高 也 会 随 之 变化 ， 但 是 标注 时 就 容易 忽略 
掉 了 这 个 前 提 ， 将 其 标 成 固定 尺寸 或 者 不 标注 让 技术 自己 去 写 。 不 管 是 哪 种 情况 ， 都 会 导 
致 后 期 频繁 的 沟通 调试 ， 增 加 开发 的 时 间 。 因 此 掌握 正确 可 落地 的 适 配 方 法 非常 重要 ， 下 
面 结合 实例 分 别 看 看 主要 有 哪些 问题 。 


1. 文字 气泡 框 直接 标注 具体 尺寸 


这 是 新 手 设计 师 常 见 的 标注 方法 ， 采 用 该 标注 方式 会 导致 小 屏 手机 展示 不 完全 ， 大 屏 手机 
展示 又 太空 的 问题 ， 如 下 图 所 示 : 


以 之 前 做 的 医生 问 诊 界面 来 说 ， 我 直接 将 气泡 框 标注 为 固定 尺寸 520px， 最 后 验收 时 才 发 
现在 iPhone 5 640px 的 屏幕 显示 时 气泡 框 已 经 超出 屏幕 ;而 在 iPhone 8 Plus 828px 的 
屏幕 显示 时 留 白 又 太 多 ， 导 致 各 机 型 展示 效果 不 统一 。 
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二 sw, aasnzess: masa 
计 需 录 ， 下 二 二 疼 ， 可 以 把 过 
在座、 入 会 民 局! 


so ES 
EEEEES 
设计 稿 标注 750px 的 屏幕 


v 


Oa maanzogss nsama 页 sw masnzngs won 
0 tt 
人 th 放生 


iPhone 640px 的 屏幕 iPhone 828px 的 屏幕 


2. 不 同比 例 图 片 ， 气 泡 缩 略 图 均 展 示 方 图 
在 发 送 图 片 时 会 涉及 不 同比 例 的 图 片 ， 如 果 都 采用 方形 展示 ， 那 么 多 余 的 部 分 就 会 被 隐藏 
掉 ， 采 用 该 适 配 方式 的 问题 是 不 能 将 图 片 信息 最 大 化 展现 ， 占 用 屏幕 空间 ， 如 下 图 所 示 : 


er AST Eo 1 35 


* 赵 医 生 


© 过 可 能 量 吼 了 什么 东 析 过 航 了 ， 芝 了 几 
天 了 ， 床 子 秽 在 严 不 严重 ， 您 为 全 的 活 
可 以 外 个 加 片 我 看 看 


均 以 方 图 展现 
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还 是 以 咨询 医生 这 个 界面 为 例 ， 分 别 上 传 了 横 图 和 竖 图 ， 从 图 可 以 看 到 最 终 的 缩 上 略 


图 效果 


都 是 方 图 ， 这 样 的 展示 方式 对 于 用 户 量 小 的 版 本 使 用 尚 可 ， 但 是 如 果 你 的 App 用 户 量 大 ， 


同时 聊天 界面 使 用 率 高 ， 就 需要 考虑 信息 最 大 化 展现 了 。 


如 何 解 决 


以 上 两 个 问题 都 是 我 第 一 次 做 聊天 界面 时 遇 到 的 ， 通 过 查找 资料 、 对 各 平台 对 比 、 和 技术 


沟通 、 咨 询 设计 前 辈 等 方式 ， 我 总 结 了 较为 落地 的 适 配 方案 。 


1. 文字 部 分 一 一 采用 百分比 标注 


由 于 气泡 框 的 宽度 随 着 屏幕 宽度 变化 ， 因 此 采用 百分比 的 标注 方法 ， 可 以 很 好 地 解决 多 设 


备 下 不 统一 的 问题 。 


计算 方式 : 气泡 框 的 最 大 宽度 ( A ) / 屏幕 宽度 ( W ) =70%。 根 据 该 公式 ， 我 们 也 能 够 


根据 屏幕 宽度 得 到 较为 适合 的 气泡 框 的 设计 尺寸 ， 如 下 图 所 示 : 


全 se nazmaags oarny 
诊 需 冰 ， 或 者 病 情 言 询 ， 可 以 直接 搞 过 
Rb 


-wo EE © 
a 《 


设计 稿 标注 750px 的 屏幕 
vv 
人 ae， EE nm 二。 ae， 二 :区 生 : 各 果 多 有 复 访 
， 枢 者 病情 次 有 求 ， 或 者 病情 癌 询 ， 可 以 直接 描述 你 的 症 
我 会 尽 装 ， 我 会 尽快 给 你 回复 ! 


iPhone 640px 的 屏幕 iPhone 828px 的 屏幕 
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采用 百分比 标注 后 ， 适 配 到 iPhone 5 640 x 1136 分 辩 率 的 屏幕 和 iPhone 8 Plus 
1242 x 2208 分 辩 率 的 屏幕 中 就 都 不 会 出 现 显示 不 完全 或 者 留 白 太 多 的 问题 了 。 

注意 : 在 设计 时 百分比 不 是 固定 的 ， 大 家 可 适当 调整 。 例 如 你 的 App 留 白 比较 多 ， 那 么 这 
个 数值 可 设置 为 65% ; 留 白 少 可 设置 为 80% ， 常 规 可 设置 为 70% ， 然 后 再 取 8 的 倍数 即 
可 。 以 750 x 1334 分 辨 率 为 例 进行 设计 ， 气 泡 框 按照 常规 比例 设置 为 70%， 那 么 气泡 框 
的 最 大 宽度 (a)=750 x 70%=525px， 最 后 取 8 的 倍数 为 520px。 


2. 图 片 部 分 一 一 设置 图 片 比例 的 阅 值 


聊天 气泡 框 中 的 图 片 一 般 有 正方 形 图 、 横 图 、 竖 图 ， 为 了 最 大 化 地 保留 图 片 长 宽 比 样式 ， 
保证 超 长 图 信息 的 可 识别 性 ， 首 先 需要 确定 图 片 适 配 规 则 和 设置 图 片 比例 的 阔 值 。 


1 ) 设置 缩 略 图 尺寸 范围 ， 以 单 边 进行 缩放 

这 是 目前 体验 较 好 的 方案 ， 可 满足 各 比例 图 片 信息 最 大 化 的 展示 。 因 此 ， 大 家 在 设计 时 
首先 需要 确定 缩 略 图 尺寸 范围 。 以 问 医 生 的 项 目 为 例 ， 在 2 倍 图 下 我 将 其 分 辩 率 设置 为 
300 x 300( 该 数值 在 保证 展示 效果 的 情况 下 ， 一 屏 可 展示 更 多 的 图 片 )。 


设置 好 缩 略 图 尺寸 范围 后 ， 图 片 如 何 适 配 呢 ? 可 以 通过 将 图 片 最 长 边 适 配 到 缩 略 图 中 ， 然 
后 再 等 比例 缩放 即 可 。 我 分 别 做 了 方 图 、 横 图 、 坚 图 的 适 配 效果 ， 如 下 图 所 示 : 


缩 略 图 尺寸 范围 
300x300 


、 横 图 、 竖 图 适 配 到 缩 略 图 效果 
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2 ) 设 定 图 片 适 配 的 辣 值 比例 


在 实际 场景 中 ， 往 往 会 遇 到 特殊 比例 图 片 ( 如 超 长 图 ) ， 将 其 适 配 之 后 就 会 发 现 图 片 所 占 
面积 极 小 ， 不 仅 展示 效果 不 佳 ， 同 时 识别 性 也 极 低 ， 如 下 图 所 示 : 


长 图 适 配 占 比 面积 小 ， 识 别 性 低 


因此 在 适 配 时 我 们 还 需要 设置 阅 值 ， 什 么 是 阅 值 呢 ? 阅 的 意思 是 界限 ， 故 阅 值 又 叫 临界 
值 ， 也 就 是 当 图 片 的 比例 超过 阅 值 时 ， 其 缩 上 略图 展示 效果 和 阅 值 一 致 。 考 虑 到 图 片 的 展示 
效果 和 识别 性 ， 将 3 : 1 作为 阅 值 较为 合适 。 


当 图 片 比例 小 于 等 于 3 : 1 时 ， 将 图 片 等 比 缩放 ， 最 长 边 为 缩 略图 的 最 大 尺寸 300px， 如 下 
图 所 示 : 


图 片 比例 小 于 等 于 3 : 1 


当 图 片 比例 大 于 3 : 1 时 ， 仍 采用 3 : 1 的 缩 略 图 展示 尺寸 ， 多 余部 分 进行 隐藏 ， 从 而 让 图 
片 更 有 识别 性 。 
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图 片 比例 大 于 3 : 1 


以 上 就 是 利用 阅 值 设置 缩 略 图 最 大 尺寸 ， 以 单 边 进 行 缩放 的 方法 。 需 要 注意 的 是 ， 当 图 片 
分 辨 率 不 足 300 x 300 时 ， 需 按照 适 配 规则 等 比例 放大 到 300 x 300 后 展示 ， 这 样 当 图 片 过 
小 时 ， 可 以 最 大 化 展示 图 片 信息 ， 如 下 图 所 示 : 


画 重点 
文字 部 分 : 在 聊天 界面 中 ， 文 字 气 泡 框 适 配 最 好 采用 百分比 的 方式 进行 标注 ， 这 样 能 保证 
各 个 机 型 展示 效果 统一 ， 保 证 项 目 顺利 落地 。 


图 片 部 分 : 图 片 气泡 框 适 配 首先 要 设置 好 缩 略 图 的 取 值 范围 ， 为 了 最 大 化 地 保留 图 片 长 宽 
比 样式 ， 图 片 适 配 采 用 设置 两 边 边 长 的 取 值 范围 ， 以 单 边 进行 缩放 ， 并 设 定好 图 片 适 配 的 
阅 值 比例 。 

参考 资料 

聊天 缩 略 图 背后 的 故事 : 你 不 曾 注 意 的 那些 细节 http://t.cn/ROH1273 


聊天 产品 的 设计 策略 一 缩 略 图 ”http://t.cn/E5PlsoG 
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11 图 片 比例 


文 / 刘 芳 


在 设计 时 ， 我 们 会 注意 界面 的 排版 、 文 字 的 对 比 、 图 标 图 片 的 美观 ， 但 是 图 片 比例 却 很 容 
易 被 忽略 。 一 些 设计 师 会 通过 参考 优秀 App 的 尺寸 来 设 定 ， 一 些 设计 师 直接 赁 感觉 取 个 数 
值 即 可 ， 并 无 规范 可 言 。 其 实 图 片 在 设计 时 需要 遵循 一 定 的 比例 ， 这 样 会 更 符合 产品 定位 
以 及 方便 后 期 维护 。 本 文 总 结 了 五 种 Ul 中 常见 的 图 片 比例 。 


图 片 常见 比例 


图 片 比例 3 : 2 


3 : 2 这 个 尺寸 其 实 源 于 135 胶 卷 的 比例 ， 采 用 它 并 不 是 因为 黄金 比例 ， 而 是 由 相机 的 像 场 
大 小 决定 的 。 


36mm 


Wuwpe 


镜头 成 像 区 域 


135 胶 卷 的 比例 3 : 2 


早期 徕卡 镜头 的 成 像 圈 直 径 大 约 为 44mm， 而 胶卷 的 宽 是 24mm， 因 此 如 果 在 直径 44mm 
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的 贺 上 截取 一 块 宽 为 24mm 的 长 方形 ， 那 么 边 长 正好 为 36mm， 也 就 是 3 : 2 的 比例 。 同 时 
由 于 徕卡 相机 的 用 户 群 巨大 ， 因 此 其 他 相机 厂商 也 逐渐 将 尺寸 统一 为 3 : 2。 


早期 图 片 大 多 使 用 3 : 2 的 尺寸 ， 但 是 随 着 移动 设备 的 发 展 ， 手 机 很 大 程度 上 蔡 代 单反 成 为 
主流 拍照 设备 ，4 : 3 和 16 : 9 的 图 片 数量 占 比 追 上 了 传统 摄影 的 3 : 2， 几 乎 与 其 半分 天 
下 。 目 前 我 们 看 到 一 些 租房 、 旅 游 类 App 仍 然 采用 该 比例 ， 例 如 爱 彼 迎 和 携程 。 


热门 目的 地 


mm 


爱 彼 迎 和 携程 的 图 片 大 多 采用 专业 设备 3 : 2 的 比例 进行 拍摄 ， 因 此 采用 该 比例 可 以 最 大 化 
地 展示 图 片 信息 ， 便 于 后 期 的 维护 。 


图 片 比例 4 : 3 


4 : 3 是 随 着 小 型 相机 ( 例如 微 单 ) 的 出 现 而 诞生 的 。 受 限于 当时 的 传感器 技术 ， 大 家 要 想 
把 相机 做 得 更 小 ， 就 需要 尽 可 能 地 在 小 体积 上 实现 更 高 的 像素 ， 因 此 大 家 采用 的 方法 就 是 
把 比例 做 得 更 方 。 所 有 几何 图 形 中 ， 对 角 线 距离 越 相 近 ， 图 形 越 接近 圆 形 ， 图 片 占 比 面积 
也 就 越 大 。 


eg 二 所 全 二 


同 像素 下 4 : 3 像 场 更 大 ， 也 就 是 图 片面 积 更 大 
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相 比 于 3 : 2 的 图 像 来 说 ， 这 种 比例 可 展示 的 信息 更 多 ， 目 前 一 些 美食 和 图 片 类 App 多 采用 
4 : 3 的 比例 ， 例 如 厨房 故事 、in。 


玉昌 绊 的 二 内科 理 : 要 久 各 们 有 要 是 


厨房 故事 in 


在 设 定 图 片 比例 时 ， 大 家 可 能 会 纠结 是 选择 4 : 3 还 是 3 : 2 呢 ? 这 里 我 有 一 个 简单 的 方 
法 ， 那 就 是 看 产品 目标 是 以 内 容 为 主 还 是 以 图 片 主 ， 例 如 Nice 和 厨房 故事 。 


和 四 全 部 》 


即便 不 六 名， 这 位 风气 的 小 六 江天 术 世 起， 尼 贡 汉 
沟 要 涪 了 -~ 


Nice 


由 于 Nice 的 产品 目标 是 以 展示 内 容 为 主 ， 因 此 它 的 图 片 采用 3 : 2 的 方式 ， 其 优势 就 是 在 同 
样 的 横 屏 大 小 中 ， 可 露出 更 多 的 图 片 。 而 厨房 故事 的 产品 目标 是 以 美食 类 的 图 片 为 主 ， 
此 它 的 图 片 采 用 4 : 3 的 比例 ， 其 优势 是 单 张 图 片面 积 占 比 大 ， 可 展示 更 多 的 信息 。 


图 片 比例 1 : 1 


1 : 1 是 传统 的 120 胶 片 画幅 ， 也 叫 中 画幅 ， 因 为 相机 结构 和 其 他 一 些 原因 ， 导 致 了 胶片 
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是 方形 的 ， 一 般 为 60mm x 60mm， 利 用 该 比例 可 以 将 构图 归 整 得 简单 ， 突 出 主 被 摄 体 
的 存在 感 。 


60mm 


镜头 成 像 区 域 


1: 1 是 传统 的 120 胶 片 画幅 ， 突 出 主 被 摄 体 的 存在 感 


因此 该 比例 多 用 于 需要 突出 主体 的 图 片 ， 例 如 电 商 类 以 图 片 促进 销售 的 App， 以 及 推荐 类 
的 图 片 列表 中 ， 例 如 严 选 、 网 易 云 音乐 。 


1 【VP 地 可 】 一 局。 生 沁 开 天 ， 需 要 机 这 导 个 
ea EE 


Cr 
MT NPC WE (WE MY PCE (Pe 


a errr ry 
sa a EE 
严 选 网 易 云 音乐 


严 选 等 电 商 类 的 App 由 于 图 片 直接 决定 了 用 户 的 点 击 量 ， 因 此 往往 会 采用 1 : 1 的 比例 突出 
商品 主体 从 而 促进 销售 。 网 易 云 音乐 的 首页 推荐 也 是 采用 该 比例 ， 其 优势 是 可 以 展示 更 多 
的 产品 。 


图 片 比例 16 : 9 


根据 人 体 工程 学 的 研究 ， 发 现 人 两 只 眼睛 的 视野 范围 是 16 : 9 的 长 方形 ， 所 以 电视 、 显 示 
器 行业 都 根据 该 比例 来 设计 产品 ，iPhone 5 是 首 款 屏幕 比例 为 16 : 9 的 手机 。 
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iPhone 5 是 首 款 屏幕 比例 为 16 : 9 的 手机 


在 设计 时 ， 图 片 的 尺寸 设 定 和 这 些 拍摄 器 材 有 很 大 的 关系 ， 因 此 在 视频 类 的 App 中 大 多 
用 16 : 9 的 比例 ， 例 如 App Store、 腾 讯 视频 。 


微 信 读 书 
协 门 小 说 辣 读 赴 书 神器 更 晰 
页 南 页 


ss aa 


App Store 


App Store 的 快照 页 在 4.7 英 寸 的 手机 (iPhone 6、7、8 ) 上 均 是 采用 16 : 9 的 比例 ， 
这 是 由 于 它们 的 分 辩 率 是 750x1334， 刚 好 是 9 : 16; 腾讯 视频 的 列表 图 片 也 是 采用 该 比 
例 ， 这 主要 是 因为 电影 、 电 视 都 是 采用 该 比例 。 


图 片 比 例 3 : 1 


3 : 1 是 聊天 气泡 框 中 图 片 适 配 的 赣 值 比例 ， 也 就 是 当 你 发 送 的 图 片 长 宽 比 大 于 3 : 1 时 ， 
其 缩 略 图 的 展示 范围 仍然 是 3 : 1， 多 余部 分 进行 隐藏 ， 从 而 让 图 片 更 有 识别 性 。 
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如 下 图 所 示 ， 我 分 别 上 传 了 4 : 1 的 横 图 和 竖 图 ， 它 们 的 缩 略 图 展示 范围 均 和 3 : 1 一 致 ， 
采用 该 阅 值 比例 可 以 保证 超 长 图 适 配 之 后 具有 好 的 识别 性 。 


图 片 比例 大 于 3 : 1 


微 信 在 适 配 时 就 采用 这 一 比例 。 下 图 是 我 分 别 发 送 3 : 2、2 :1、3 : 1、4 : 1、8 :1 几 个 
尺寸 时 的 显示 情况 ， 可 以 看 到 从 第 三 张 图 开始 ， 后 面 的 几 个 比例 展示 效果 均 是 3 : 1， 这 样 
可 以 避免 直接 适 配 出 现 一 条 极 细 图 片 的 尴 众 。 


1 中国 移 动 全 下 午 2.50 四 了 本 了 
< 星 哥 

352 
国王 


| 
”EN 
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画 重 点 


大 家 在 设计 时 需要 记 住 ， 图 片 比例 在 设 定时 最 好 有 一 定 规律 ， 不 要 随意 地 设置 尺寸 。 
同时 一 个 App 中 图 片 的 比例 不 宜 过 多 ， 最 好 不 要 超过 3 种 ， 类 似 功能 的 图 片 采用 同一 
比例 。 


另外 在 确定 采用 哪 种 图 片 比例 时 ， 先 确定 产品 类 型 和 产品 目的 。 如 果 项 目 是 电 商 类 产品 ， 
主要 目的 是 为 了 卖 货 ， 那 么 我 们 就 选择 1 : 1 的 比例 可 以 突出 商品 主体 ; 如 果 你 是 做 视频 类 
的 App， 那 么 你 的 产品 展示 列表 就 可 以 采用 16 : 9 的 比例 。 总 之 ， 在 选择 时 需要 做 到 符合 
产品 定位 、 考 虑 维护 成 本 ， 做 到 有 理 有 据 。 


参考 资料 
既然 16 : 9 这 么 有 大 片 范 ， 过 去 为 什么 用 3 : 2? ”http://h5ip.cn/iLEA 
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12 ”关于 卡片 圆 角 的 思考 


文 / 姜 正 


我 们 最 熟悉 的 苹果 公司 使 用 圆 角 卡片 的 最 早 历史 可 以 追溯 到 1981 年 ， 当 时 苹果 公司 的 天 
才 程 序 员 Bill Atkinson 正 向 团队 展示 他 是 如 何 用 一 种 聪明 的 方法 在 当时 仅 有 68000 处 
理 器 的 Lisa 和 Macintosh 机 器 上 快速 画 出 圆 和 椭圆 。Steve Jobs 看 了 之 后 有 另外 的 想 
法 ， 他 说 : “ 圆 和 椭圆 都 不 错 ， 但 是 能 画 出 带 圆 角 的 四 边 形 吗 ? 我 们 现在 也 能 画 出 吗 ? ” 
Bil Atkinson 回答 说 很 难 做 到 ， 而 且 他 认为 并 不 真正 需要 圆 角 四 边 形 。Steve Jobs 就 立 
刻 强烈 回应 了 : “到 处 都 是 圆 角 四 边 形 ! 看 看 这 个 房间 周围 就 知道 了 ! ”并 且 他 还 带 着 
Bill Atkinson 出 去 转 看 可 以 碰 到 多 少 圆 角 四 边 形 。 最 后 Bill Atkinson 被 说 服 ， 第 二 天 下 
午 就 拿 出 了 满意 的 结果 。 


手机 工业 设计 趋势 


正如 Steve Jobs 所 说 ， 到 处 都 是 圆 角 四 边 形 。 纵 观 2018 年 各 大 厂商 发 布 的 旗舰 手机 ， 
在 工业 设计 上 基本 都 采用 了 更 加 柔和 的 圆 角 设计 ， 例 如 iPhone、SAMSUNG、 小 米 、 
VIVO 等 。 
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屏幕 设计 同样 选择 了 圆 角 设计 ， 在 细节 之 处 也 保持 了 高 度 的 统一 ， 例 如 iPhone 在 摄像 头 
位 置 的 连接 处 同样 采用 了 圆 角 弧度 作为 过 渡 。 可 见 圆 角 设计 已 经 在 工业 设计 中 成 为 非常 重 
要 的 设计 语言 。 


手机 系统 UI 设计 趋势 


不 止 是 手机 的 工业 硬件 设计 上 采用 了 大 量 的 圆 角 ， 各 大 厂商 手机 系统 的 UI 也 是 大 量 采 用 
了 圆 角 设计 。 


大 家 最 熟悉 的 可 能 就 是 iOS 系统 里 的 圆 角 设计 ， 自 2007 年 iOS 7 发 布 ，Apple 将 iOS 上 
标志 性 的 圆 角 标 轮廓 做 了 更 新 ， 将 工业 设计 中 的 曲线 连续 概念 应 用 到 了 视觉 设计 上 ， 并 一 
直 延 续 至 今 ， 在 iOS 12 中 得 到 全 面 应 用 。 


除了 iOS 系统 ，Android 系统 的 各 大 厂商 也 纷纷 使 
SAMSUNG 的 ONE UI 以 及 国内 的 MIUI 10 的 系统 界面 。 


型 
团 


角 作 为 设计 语言 ， 例 如 


98 UI 那些 事 儿 : 新 手 设计 师 的 成 长 之 路 


闻 eco 
PR 


全 的 年 终局 络 闪 普 好 了 四 7 
时 网 名 是 志和 们 不断 多 行 ，2017 征 人 


正在 更 新 应 用 
小 于 自用 丙 和 正 于 新 5 个 自用 。 


Ml Ooion Sa 
Nd non 


池上 位于 在 拉 可 可 这 相 关 卫 上 


MIUI 


人 有 眼 处 理 圆 角 更 加 容易 


相对 于 其 他 图 形 ， 人 类 的 眼睛 在 识别 圆 角 弧 形 的 时 候 更 加 容易 。 因 为 人 眼 生理 构造 上 的 中 
央 凹 (是 视网膜 中 视觉 最 敏锐 的 区 域 ) 在 处 理 圆 形 时 最 快 ， 而 处 理 憩 形 边缘 时 则 需要 涉及 大 
脑 中 更 多 的 “神经 影像 工具 ”。 所 以 ， 人 眼 处 理 圆 角 矩形 更 加 容易 ， 因 为 它们 看 起 来 比 普 
通 和 矩形 更 接近 于 圆 。 


困难 容易 


例如 ，App Store 中 的 Today 页 面 ， 每 天 推送 的 内 容 通 过 圆 角 的 卡片 设计 呈现 给 用 户 ， 
让 用 户 可 以 快速 识别 当前 模块 。 但 如 果 换 成 直角 的 话 ， 我 们 发 现 相 对 于 圆 角 卡 片 它 的 识别 
成 本 明显 增加 。 
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中 国联 天 全 F4222 @ 7 70% mm 中 国联 天 全 下 午 222 @ 7 79% mm 


《INSIDE》: 愿 我 们 《INSIDE》: 愿 我 们 
在 黑暗 的 另 一 边 相 见 在 黑暗 的 另 一 边 相 见 


全 全 


4 4 


更 多 为 你 推荐 的 故事 更 多 为 你 推荐 的 故事 

A A & A 

带 虚拟 歌 媚 和 带 虏 拟 歌 媚 KR 

国 和 二 所 Q 国 多 二 由 Q 
App Store 


在 实际 线 上 的 大 多 数 产品 中 ， 打 开 App 弹出 的 运营 活动 弹 窗 多 为 圆 角 矩形 ， 因 为 用 户 识 
别 圆 角 矩形 更 加 容易 ， 如 果 换 成 直角 的 话 则 会 提升 识别 成 本 ， 且 显得 生硬 。 


~ 今日 精 造 往 利 推荐 


连续 签到 领取 红包 


®lVvYyy 
vv 


-ss 可 也 = 二 tr 旬 


微 博 
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在 巴 罗 的 神经 学 研究 所 完成 的 关于 “ 角 ” 的 科学 研究 发 现 ， 角 的 凸显 性 感知 与 角 的 度数 呈 
线性 变化 ， 锐 角 比 钝 角 会 产生 更 强 的 虚幻 的 凸显 性 。 换 句 话说 ， 角 越 锐利 ， 看 起 来 越 明 
显 ， 视 觉 冲 击 力 越 强 ， 对 周边 环境 产生 影响 越 大 。 而 圆 角 弧 形 则 看 起 来 更 加 柔和 各， 易于 处 
理 ， 不 会 对 环境 造成 过 多 的 影响 ， 如 下 图 所 示 : 


锋利 的 锐角 圆 弧 形 


例如 西瓜 视频 在 改版 中 ， 将 “锐角 ”的 播放 按钮 改 成 了 “ 
对 用 户 的 视觉 影响 ， 使 页 面 整体 更 加 统一 。 


圆 角 ”的 播放 按钮 ， 减 少 了 锐角 


NBA 扣 篮 大 赛 最 近 10 年 的 精华 全 在 这 此 了 ! 


NBA 扣 得 大 赛 最 近 10 年 的 精华 全 在 这 儿 了 


西瓜 篮球 官方 关注 : 西瓜 篮球 官方 关注 
© Be © 


Du : 


改版 前 改版 后 


圆 角 更 加 安全 


到 角 自身 的 图 形 属性 更 加 柔和 、 和 舒适 ， 给 人 一 种 安全 感 和 亲密 感 。 而 尖 角 则 给 人 一 种 尖 
锐 、 具 有 攻击 性 的 感觉 。 我 们 可 以 回忆 一 下 日 常 比较 尖锐 的 物体 ， 例 如 剪刀 、 怨 子 、 警 示 
牌 等 ， 都 会 给 人 带 来 伤害 或 者 警示 他 人 的 意向 。 
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E 


在 设计 玩具 的 时 候 会 采用 大 量 的 圆 角 设计 ， 来 让 家 长 对 其 放下 戒备 心 ， 让 家 长 觉得 这 是 安 
全 的 ， 可 以 给 孩子 玩 。 试 想 哪个 家 长 会 给 孩子 一 把 刀 玩 ? 


现在 的 少儿 用 户 群体 也 在 逐年 增长 ， 针 对 少儿 用 户 ， 由 于 群体 的 特殊 性 ， 少 儿 应 用 App 
中 使 用 了 大 量 的 圆 角 设计 。 例 如 ABC mouse 中 控件 都 使 用 了 大 圆 角 的 设计 ， 首 先是 提 
高 了 页 面 按钮 的 识别 性 ， 其 次 是 圆 角 设计 给 用 户 带 来 安全 可 靠 的 感觉 ， 让 用 户 更 加 信赖 
产品 。 
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ABC mouse 


圆 角 使 得 信息 更 易于 处 理 


圆 角 在 使 用 地 图 或 图 表 的 场景 中 具有 的 得 天 独 厚 的 优势 ， 圆 角 的 弧度 能 够 更 加 平滑 地 连续 
引导 用 户 的 视线 ， 符 合用 户 的 头 部 与 眼睛 的 自然 运动 ; 而 锐角 则 会 迫使 用 户 的 视线 进行 强 
制 转 折 ， 容 易 造 成 用 户 的 停顿 。 


nr 


例如 北京 的 地 铁 地 图 ， 在 折线 处 大 都 采用 了 圆 角 设计 ， 具 有 很 强 的 引导 性 ， 来 帮助 用 户 快 
速 查 询 各 个 地 铁 站 点 。 假 设 换 成 了 直角 的 转折 设计 ， 在 本 来 就 嗜 杂 拥挤 的 地 铁 环 境 里 ， 乘 
客 将 付出 更 多 的 成 本 去 查看 地 铁 线路 。 
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在 圆 角 和 矩形 中 ， 由 于 边缘 圆 角 向 内 指向 矩形 中 心 的 感觉 更 加 明显 ， 所 以 使 用 圆 角 卡片 能 更 
加 凸显 卡片 中 央 的 内 容 ， 如 下 图 所 示 : 


ER 号 一 
Se DN 


圆 角 的 指向 性 


当 多 个 卡片 并 排 时 ， 带 圆 角 的 卡片 具有 更 强 的 内 部 指向 性 ， 且 相 邻 的 两 条 线 差 异化 较 大 ， 
我 们 可 以 清楚 分 辨 它们 的 边界 线 ; 而 同样 大 小 的 直角 和 矩形 的 内 部 指向 性 较 弱 ， 临 近 的 两 根 
“ 线 ”更 加 相似 ， 分 辨 起 来 会 相对 困难 一 些 。 


分 辨 困难 
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例如 App Store 页 面 ， 通 过 简单 的 修改 ， 我 们 再 次 比较 一 下 直角 与 圆 角 在 实际 中 的 应 用 。 
可 以 看 到 ， 在 识别 直角 卡片 的 时 候 我 们 需要 耗费 更 多 的 精力 ， 而 圆 角 卡片 则 不 会 耗费 过 多 
的 精力 ， 且 由 于 圆 角 的 内 指向 性 ， 圆 角 卡 片 能 够 更 好 地 衬托 卡 的 内 容 。 


mg 全 ea 了 PT L424 rm 

等 待 中 全 部 更 新 等 待 中 全 部 更 新 
mi 小 米 商 城 -智能 产品 好 .… 更 ml 小 米 商城- 智能 产品 好 .… 更 新 

本 次 更 新 : 本 次 更 新 : 

~ 优化 功能 细节 体验 ， 修 复 部 分 问题 更 多 -优化 功能 把 节 体 验 ， 修 复 部 分 问题 更 多 

Ei So 

“修复 文登 评 论 要 、 闪 进 竺 bug 至 多 -~ 精 香 文旦 评论 棋 、 闪 这 等 bug 更 多 
hh MarginNote 3 i Sh Mannow 3 更 而 

烤 息 上 一 更 新 后 发 生 的 频繁 闪 这 问题 (3.2.7) 修复 上 一 更 新 后 发 生 的 搓 繁 闪 衣 问题 (32.7) 

党 一 同 是 因为 更 新 最 的 编译 各 10 2 编译 更 名 一 同时 是 因为 更 关 显 新 的 将 器 10.2 术 评 导 。 理 

A mtn mann PN 
目 和 多 Pa 加 9 专 Pa 
App Store 


通栏 式 卡 片 与 圆 角 卡 片 


卡片 设计 已 经 成 为 最 常用 的 设计 语言 之 一 。 最 后 本 文 从 空间 利用 率 、 视 觉 识 别 性 、 沉 浸 感 三 个 
维度 来 对 比 一 下 通栏 式 卡片 和 圆 角 卡片 的 区 别 ， 总 结 一 下 圆 角 卡片 的 优 缺 点 。 


1. 空间 利用 率 

通栏 式 卡片 比 圆 角 卡片 的 空间 利用 率 高 ， 同 等 情况 下 通栏 式 卡片 可 承载 更 多 内 容 。 圆 角 卡 
片 需要 在 规范 好 的 内 容 区 之 内 ， 卡 片 的 内 容 与 卡片 边缘 还 需要 一 定 的 间隔 距离 ， 导 致 了 内 
容 区 域 的 缩小 ， 而 通栏 卡片 则 没有 这 样 的 烦恼 。 


2. 视觉 识别 性 
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圆 角 卡片 比 通栏 式 卡片 的 视觉 识别 性 更 加 突出 ， 因 为 人 眼 识别 圆 角 和 矩形 比 识别 直角 和 矩形 更 加 
容易 ， 所 以 需要 突出 内 容 的 时 候 首选 圆 角 卡片 。 例 如 ， 产 品 中 穿插 的 运营 Banner 设计 基本 
都 会 选用 圆 角 卡片 的 形式 ， 下 图 左 侧 直 角 卡 片 的 识别 性 就 相对 较 弱 。 


3. 沉浸 感 


淘宝 


通栏 式 卡片 比 圆 角 卡片 的 沉浸 感 更 强 ， 因 为 圆 角 更 容易 被 识别 ， 而 直角 则 不 容易 被 察觉 。 常 用 
App 中 的 Feed 流 几乎 都 是 通栏 式 卡片 ， 例 如 same 和 豆瓣 。 


same 


Co 
人 昌 看 的 《 贡 开 江 社 3: 醒 和 个 期》 有 
新 的 本 才能 了 Er 


1 es cmsm mpiaomn 
[ei em 


@” 
开 噶 讽 好 开心 叭 。 最 近 不 太 上 豆 纵 ， 奎 PW 
以 及 写 原创 文 到 得 过 2333 


外? Dp 名 
[Ed 
别 天 天 党 得 自己 男女 平等 超过 日 本 就 
和 天， 拜托 ， 你 咱 不 和 日 本 比 设计 籽 ? 
年 级 个 数 比 ， 比 豪 了 还 要 奖励 你 是 不 是 财 。 
会 四 2 加 


于 


豆瓣 
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因为 圆 角 希望 你 能 够 快速 识别 卡片 上 的 内 容 ， 并 能 够 与 周围 的 元 素 有 所 区 分 ， 强 调 卡 片 
内 的 内 容 ， 所 以 圆 角 卡片 常常 打 断 用 户 的 沉浸 感 ， 目 的 性 更 强 一 些 。 例 如 京东 和 淘宝 的 
个 人 页 面 ， 各 模块 均 使 用 圆 角 卡片 ， 能 够 更 好 地 区 分 业务 组 和 促进 用 户 聚焦 当前 的 业务 
操作 。 


PLUS 会 员 专 地 时 和 小 亿 作 CLE 首 时 洽 馈 小 克 

es 0 

EE ci 
京东 淘宝 


画 重点 


( 1) 从 手机 的 工业 硬件 设计 到 内 置 系 统 的 UI 界面 设计 ， 都 采用 了 大 量 的 圆 角 ， 佐 证 了 圆 
角 设 计 已 经 成 为 主要 的 设计 趋势 。 


(2 ) 人 眼 在 处 理 和 识别 圆 角 图 形 的 时 候 更 加 快捷 方便 ， 而 处 理 锐角 的 成 本 较 高 ， 且 锐角 
对 周边 的 环境 影响 较 大 ; 圆 角 给 人 的 感觉 更 加 安全 且 具 有 亲密 性 ， 而 锐角 则 给 人 一 种 尖锐 
感 ， 具 有 一 定 的 攻击 性 。 


( 3 ) 圆 角 的 弧度 符合 人 眼 和 头 部 的 自然 运动 ， 具 有 良好 的 引导 性 ; 在 卡片 中 能 够 清晰 区 
分 卡片 的 边界 ; 圆 角 具有 优秀 的 内 指向 性 ， 可 以 更 加 凸显 卡片 中 的 内 容 信息 。 


(4) 在 通栏 式 卡片 和 圆 角 卡片 的 对 比 中 我 们 可 以 发 现 : 通栏 式 卡 片 利用 空间 更 加 充 
分 ， 而 圆 角 卡 片 的 识别 性 更 好 ; 通栏 卡片 的 沉浸 感 较 强 ， 但 圆 角 卡片 更 加 能 够 突出 当 
前 的 内 容 。 
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从 圆 角 到 圆 角 https://dwz.cn/EvHt3SLG 


西瓜 视频 3.0 改 版 总 结 https://dwz.cn/db7KXKMH 
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01 一 套图 标的 诞生 


文 / 付 铂 刺 


图 标 一 直 都 是 移动 端 界 面 中 的 亮点 之 一 ， 图 标 风格 的 准确 性 ， 取 决 于 我 们 对 产品 属性 的 认 
知 。 产 品 中 好 的 图 标 不 是 独树一帜 ， 而 是 要 融入 整体 ， 给 用 户 舒服 的 感觉 。 


多 数 人 的 误区 


目前 很 多 设计 师 走 进 一 个 误区 ， 莫 名 觉得 自己 不 会 画图 标 ( 动手 能 力 不 足 ) ， 其 实 是 思维 
束缚 了 自己 。 图 标的 难点 不 在 于 动手 画 ， 而 是 在 于 画图 标的 思路 和 总 结 的 过 程 。 要 学 会 挑 
选 不 同 的 参考 ， 揉 碎 之 后 融合 到 你 自己 的 图 标 中 ， 这 样 才 能 做 出 有 创意 的 新 图 标 。 


图 标 设 计 流 程 


第 一 步 ” 找 参考 风格 
根据 产品 定位 去 素材 库 或 者 各 大 设计 网 站 选择 合适 的 参考 图 标 。 如 下 图 所 示 ， 最 终 选 中 了 
两 种 粗 线 型 的 图 标 风 格 作为 这 次 图 标的 原型 参考 。 


上 日 BB 


单机 论坛 


第 一 组 图 标 参考 


OP DO 4 


movie read city music 


第 二 组 图 标 参 考 
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第 二 步 ”总 结 设计 规范 
整理 每 组 参考 图 标的 设计 规范 ， 这 一 步 很 关键 。 我 们 需要 罗列 出 两 组 图 标的 属性 。 


目 S$ © SB 


第 一 组 图 标 参考 


第 一 组 : 线 宽 为 9 像素 ， 直 角 ， 内 部 加 有 不 同 的 元 素 ， 每 个 图 标 一 种 颜色 ， 线 条 与 线条 连 
接 ， 实 色 。 


QO PD 9 4 


movie read city music 


第 二 组 图 标 参 考 


第 二 组 ， 线 宽 为 12 像 素 ， 圆 角 ， 内 部 无 其 他 无 素 ， 每 个 图 标 合 多 种 颜色 ， 线 条 与 线条 重 
志 ， 半 透明 色 。 


第 三 步 “确定 产品 属性 

通过 跟踪 目标 用 户 以 及 产品 属性 确定 图 标 风格 。 以 下 图 为 例 ， 总 结 的 产品 风格 为 游戏 性 、 
可 爱 、 圆 角 为 主 、 色 彩 丰富 。 在 多 数 情况 下 拿 到 原型 图 时 就 已 经 明确 了 产品 的 风格 走向 ， 
所 以 第 三 步 的 确定 产品 属性 和 第 一 步 的 找 参 考 风格 可 以 同步 进行 。 


效果 图 案例 
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第 四 步 ” 提 炼 

根据 自身 的 产品 属性 ， 挑 选 上 面 两 组 图 标的 特点 作为 自己 的 图 标的 设计 属性 ， 选 择 思路 
如 下 : 

( 1) 由 于 界面 本 身 以 圆 角 为 主 ， 所 以 毫 不 犹 移 地 也 选择 了 第 二 组 的 圆 角 ; 


(2 ) 第 一 组 颜色 过 于 单一 ， 游 戏 风格 不 够 强烈 ;第 二 组 颜色 过 多 ， 放 在 原本 颜色 丰富 的 
界面 中 会 显得 凌乱 。 最 终 融 合 了 两 组 的 颜色 特点 ， 确 定 图 标 为 两 种 颜色 ， 且 两 种 颜色 为 近 
似 色 ， 这 样 图 标 既 不 会 过 于 单调 ， 又 不 会 太 花 ; 


( 3 ) 选择 图 标 细节 、 线 宽 ， 我 选择 了 第 一 组 。 考 虑 到 图 标 内 部 会 加 入 一 些 其 他 元 素 ， 不 
会 像 第 二 组 图 标 内 部 没有 其 他 元 素 ， 线 太 粗 会 影响 里 面 细节 的 展示 ; 


(4 ) 选择 特性 ， 我 很 喜欢 第 二 组 图 标的 重 芭 感 ， 增 加 了 图 标的 细节 ， 所 以 我 选择 它 作 为 
我 的 图 标 特色 。 


@ 
ED 
贺 角 磊 色 线 宽 9 像 素 重合 
提炼 参考 要 素 


第 五 步 ” 图 标的 基本 原型 
一 个 常常 被 忽略 的 重点 就 是 找 原型 参考 。 举 个 例子 ， 我 们 要 做 第 一 组 的 第 一 个 单机 图 
标 ， 怎 么 找 呢 ? 我 通常 会 去 阿里 巴巴 的 矢量 图 标 库 搜索 相关 的 图 标 原型 ， 选 出 至 少 5 个 好 
看 的 图 标 作为 原型 参考 。 


由 @ 人 mm 日 


参考 3 参考 4 
原型 图 标 参 考 
因为 是 单机 游戏 ， 所 以 要 找到 符合 单机 游戏 特点 的 样式 。 最 终 我 选择 了 “参考 2” 为 我 


的 基本 图 标 造型 。 找 图 标的 原型 参考 时 一 定 要 拓宽 思路 ， 很 多 读者 总 是 想 着 做 线性 图 
标 就 找 线性 的 ， 其 他 风格 的 完全 不 看 ， 这 样 会 损失 很 多 好 的 图 标 造 型 。 
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第 六 步 ” 融合 
最 后 一 步 融合 也 是 最 简单 的 事情 ， 完 全 就 是 熟 能 生 巧 的 软件 运用 了 。 只 要 平时 多 练习 画图 
标 ， 这 一 步 就 非常 简单 ， 下 图 是 结合 的 过 程 。 


由 @ © © 


原型 圆 角 线 宽 9 像 素 颜色 重要 
图 标的 进化 


得 到 了 最 终 融 合 后 的 样式 ， 就 算是 大 功 告 成 了 。 如 果 还 想 让 自己 的 图 标 和 原型 相差 多 些 的 
话 ， 可 以 改变 一 些 细节 的 处 理 。 最 后 放 上 五 个 图 标的 完成 品 。 


四 上 由 已 日 邓 


必 玩 动漫 


原型 图 标 参 考 


画 重 点 


(1 ) 多 数 人 的 误区 : 觉得 图 标 难 画 。 但 其 实 难 点 在 画图 标的 思路 和 总 结 的 过 程 。 


(2 ) 图 标 设计 流程 : 第 一 步 ， 根 据 产 品 定位 找 参考 ; 第 二 步 ， 总 结 并 确定 参考 的 设计 规 
范 ; 第 三 步 ， 确 定 产品 的 属性 ; 第 四 步 ， 提 炼 参考 图 标 中 的 特点 ; 第 五 步 ， 查 找 图 标的 基 
本 原型 ( 与 第 一 步 有 所 区 别 的 是 所 找 参考 为 基本 图 形 ， 不 需要 过 多 的 创新 ) ; 第 六 步 ， 将 
上 面 所 总 结 的 特点 与 最 后 选 定 的 原型 图 标 相 融 合 。 


无 论 是 图 标 还 是 界面 ， 做 设计 的 过 程 中 ， 我 们 需要 不 断 地 收集 素材 进行 总 结 ， 寻 找 灵 感 和 
创意 。 对 他 人 作品 的 优点 给 予 关 注 ， 仔 细 揣 摩 作者 的 思维 方式 、 创 作 理念 ， 而 不 是 照 着 原 
作品 去 努力 使 自己 的 作品 达到 同样 的 效果 。 加 入 自己 的 思考 和 尝试 ， 才 会 有 更 好 的 效果 。 
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02 手把手 教 你 制作 设计 规范 


互联 网 时 代 产 品 迭 代 速 度 日 益 提高 ， 设 计 师 再 也 不 像 之 前 那样 ， 可 以 单打 独 斗 地 去 完成 一 
个 项 目 ， 更 多 的 是 需要 团队 的 配合 。 而 不 同 的 人 做 同一 个 项 目的 时 候 ， 就 需要 有 一 个 基本 
规范 ， 这 样 才能 把 控 最 终 输 出 的 结果 。 本 文 要 讲 的 就 是 如 何 制作 一 份 高 效 且 能 真正 落地 的 
觉 规范 。 


新 手 的 困惑 


记得 刚 开始 工作 的 时 候 ， 负 责 过 一 个 全 新 的 项 目 。 由 于 团队 也 只 有 我 一 个 设计 师 , 经 常 出 
现 这 样 的 情况 ， 开 发 者 要 改 一 个 参数 的 时 候 ， 总 是 习惯 性 地 直接 问 我 这 个 地 方 是 什么 颜 
色 、 主 色调 是 什么 、 图 标 是 多 大 、 分 割 线 的 颜色 是 什么 …… 


当 


那 时 候 潜意识 就 觉得 这 些 东 西 是 需要 有 个 规范 文档 的 , 把 一 些 常用 的 内 容 , 例如 色 值 、 字 
号 、 按 钮 、 图 标 、 间 距 等 都 放 在 一 起 , 团队 成 员 在 有 需要 的 时 候 能 够 快速 找到 。 


于 是 就 上 网 搜 了 很 多 别人 做 的 设计 规范 , 自己 依 葫芦 画 标 做 了 一 份 , 满心 欢喜 地 给 到 开 
发 者 的 时 候 , 却 被 告知 很 多 东西 都 派 不 上 用 场 。 例 如 字体 规范 里 写 的 “一 级 标题 ”, 每 
个 人 所 认为 的 一 级 标题 是 不 一 样 的 , 所 以 光 写 一 级 标题 的 话 , 别人 也 不 知道 具体 指 的 是 
哪里 。 


颜色 字号 使 用 场景 
国 ,oo 32px 重要 内 容 一 级 标题 
| ,eeeees 24px 提示 性 文字 


国 ,rreoo 24px 文字 点 击 状态 
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再 例如 图 片区 域 , 规范 得 太 死 了 , 根本 没 留 适 配 的 空间 , 就 像 个 标注 , 但 其 实现 在 看 来 作为 标 
注 也 是 不 合格 的 。 


750px 


350px 


Downarrow man 


头 部 Banner 图 尺寸 标注 样式 


结局 就 是 , 花 了 很 长 时 间 做 的 规范 只 是 自 嗨 , 实际 上 对 于 团队 来 说 一 点 作用 都 没有 。 事 后 我 
一 直 在 想 什么 样 的 规范 是 适合 小 公司 的 呢 ? 什么 样 的 规范 又 能 够 真正 节省 团队 时 间 、 提 高 
工作 效率 呢 ? 


节省 提高 
效率 


时 间 


而 现在 工作 了 几 年 之 后 , 对 这 些 有 了 更 多 的 理解 ， 所 以 就 想 把 这 些 都 总 结 记录 一 下 ， 就 算 
写 给 刚 工 作 时 候 的 自己 。 当 然 也 希望 在 写 给 自己 的 同时 也 能 够 帮助 更 多 读者 , 节省 一 些 踩 
坑 的 时 间 。 


多 每 ~ 
关于 设计 规范 
在 说 具体 怎么 做 规范 之 前 , 我 想 先 就 规范 本 身 的 意义 来 进行 说 明 , 讲 一 下 为 什么 需要 做 规 


范 , 以 及 什么 样 的 规范 才 是 好 的 , 知 其 然 知 其 所 以 然 。 


1. 为 什么 要 做 规范 
很 多 在 小 公司 的 设计 师 都 觉得 , 整个 公司 只 有 自己 一 个 设计 师 , 所 有 的 设计 稿 都 是 自己 一 个 
人 做 的 , 风格 肯定 都 是 统一 的 , 所 以 没 必 要 花 那么 长 时 间 去 做 一 个 没有 用 的 东西 。 


但 其 实 规范 本 身 并 不 是 只 给 设计 师 用 的 , 它 更 大 的 作用 是 服务 于 整个 团队 , 例如 方便 和 开发 
者 之 间 的 沟通 , 帮助 他 们 制作 统一 的 组 件 , 以 后 用 到 的 时 候 直接 调用 。 
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而 对 于 设计 师 来 说 , 也 不 用 重复 作 图 、 重 复 标注 , 改动 一 个 模块 的 时 候 就 能 同步 改动 所 有 ， 
大 大 提高 了 工作 效率 。 


JE 


而 且 有 时 候 就 算 设计 稿 是 同一 个 人 的 ， 也 很 难保 证 前 后 界面 的 参数 是 一 致 的 ， 毕 竟 人 的 精 
力 有 限 , 事情 多 的 时 候 , 很 容易 出 现 记 忆 偏差 。 


可 能 你 在 前 面 颜色 、 图 标 、 模 块 间距 做 的 是 这 样 的 ， 到 后 面相 同 模块 的 时 候 , 就 会 做 成 另 
外 一 个 样子 。 这 种 小 问题 到 后 面 再 去 修改 不 但 浪费 时 间 , 还 容易 遗漏 ， 而 前 期 花 时 间 定 义 
好 规则 ， 整 理 好 规范 , 能 够 有 效 避 免 这 个 问题 , 磨 刀 不 误 砍 柴 工 。 


页 面 1 页 面 2 


第 2 章 ”能 力 效率 提升 和 


2. 什么 样 的 规范 才 是 好 的 


一 个 好 的 规范 , 首先 得 有 人 愿意 用 , 否则 你 做 得 再 好 也 都 白费 了 。 来 换 位 思考 一 下 , 如 果 你 
是 使 用 者 , 你 希望 看 到 一 个 什么 样 的 规范 文档 ? 

对 于 我 而 言 , 最 重要 的 不 是 它 做 得 多 么 细致 、 多 么 完美 , 而 是 我 看 得 懂 , 我 能 够 在 30 秒 
内 找到 自己 想 要 的 东西 , 并 且 能 够 对 当前 的 工作 有 帮助 。 所 以 说 规范 要 简单 易 懂 且 有 指 
导 意 义 。 


3. 需要 注意 的 地 方 


(1 ) 规范 最 好 是 当主 要 界面 的 设计 完成 之 后 ， 再 来 制作 ， 切 记 不 要 一 开始 就 着 手 制作 规 
范 ， 这 样 很 容易 出 现 前 期 制定 的 规范 在 后 续 的 页 面 上 沿用 不 了 的 情况 。 我 一 般 是 把 每 个 
Tab 的 一 级 页 面 再 加 上 几 个 二 级 、 三 级 页 面 都 做 好 之 后 再 开始 ; 


(2 ) 不 要 因为 规范 而 限制 了 自己 的 思维 , 当 发 现 规范 有 问题 的 时 候 , 要 及 时 去 修正 , 而 不 是 
做 了 一 次 之 后 , 一 直 沿 用 , 永 不 修改 ; 


(3 ) 规范 要 “因地制宜 ”, 切实 可 行 , 不 要 流 于 形式 。 


1. 设计 图 尺寸 

虽说 现在 大 多 数 人 都 是 以 750 像素 (2 倍率 ) 为 设计 稿 , 但 也 还 是 有 人 在 用 720 像素 (2 倍率 ) 
的 尺寸 , 或 是 375 像素 (1 倍率 ) 的 尺寸 。 所 以 设计 之 初 要 定 一 个 统一 的 设计 尺寸 , 特别 是 多 
个 设计 师 合 作 的 时 候 , 干 万 不 要 想当然 地 以 为 别人 都 和 你 一 样 。 
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@2x 


750x1334 


2. 间距 大 小 


间距 包括 页 边 距 、 模 块 与 模块 的 间距 , 这 种 全 局 的 间距 大 小 必须 要 一 致 。 页 边 距 的 大 小 很 
好 定 , 基本 上 以 20px、24px、32px 居 多 , 根据 产品 特性 定 一 个 统一 的 就 好 。 如 果 不 知 道 怎 
么 定 ， 可 以 多 去 看 看 大 厂 或 者 同类 型 产品 的 规范 ， 尽 量 不 要 凭 感觉 定 。 


而 模块 与 模块 的 间距 就 相对 复杂 一 点 , 在 定之 前 需要 先 确定 模块 之 间 的 分 割 方式 , 是 用 线 、 
面 还 是 留 白 , 然后 再 确定 间距 。 
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线 分 割 面 分 割 


确定 好 模块 与 模块 的 分 割 方式 后 ， 还 需要 确定 模块 内 部 的 分 割 方式 ， 确 定之 后 就 要 严格 执 
行 。 例 如 规范 定 的 模块 与 模块 用 线 ， 模 块 内 部 用 留 白 ， 那 后 续 所 有 页 面 都 需要 按照 这 个 规 
则 来 ( 特殊 情况 可 不 受 此 限制 ) 。 


3. 颜色 


颜色 包括 基础 标准 色 ( 主 色 ) 、 基 础 文字 色 , 还 包括 全 局 标准 色 ( 背景 色 、 分 割 线 色 值 
等 ) ， 这 些 都 需要 标 好 色 值 以 及 使 用 的 场景 。 


基础 标准 色 基础 文字 色 全 局 标准 色 

©@ @ #F5F5F5 #F5F7FA 
* 品牌 色 * Feed 正文 、 标 题 * 上 下 导航 栏 分 割 线 。 * 背景 色 
* 全 局 Button * 输入 框 填充 

* 文字 链接 


当 颜 色 是 渐变 的 时 候 , 也 需要 标清 楚 渐变 的 颜色 。 


#FF9000 #FF5339 
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4. 字体 

不 需要 把 页 面 所 有 的 字号 都 放 到 规范 里 , 只 需要 把 常用 的 字号 及 其 所 使 用 的 场景 写 清楚 就 
好 。 需 要 注意 的 是 ， 使 用 场景 要 写 一 些 带 有 明确 指向 的 描述 文字 ， 例 如 顶 导 航标 题字 号 、 
Feed 流 正 文 、 详 情 页 标题 等 。 


样式 字号 使 用 场景 
柳 子 的 检 子 32px 详情 页 标题 (加 粗 ) 
橙子 的 橙子 24px Feed 标题 
橙子 的 橙子 24px 用 户 昵称 & Feed 操作 栏 文字 


还 有 一 点 也 不 能 忘记 ， 那 就 是 行 间距 ， 不 管 是 一 行文 字 还 是 多 行文 字 ， 我 们 都 需要 标清 行 
间距 ， 也 就 是 行 高 ， 如 果 是 段落 的 话 还 需要 标注 段落 间距 。 


字号 28px 
行 高 40px 
段落 间距 20px 


为 了 避免 团队 的 其 他 成 员 忽略 了 文字 的 行 间距 ， 我 们 需要 在 做 规范 的 时 候 标 明 ， 所 有 文字 
必须 注 明 行 间距 。 


5. 图 标 
项 目 紧 急 而 人 员 又 不 足 的 时 候 , 可 能 没有 那么 多 时 间 去 把 所 有 图 标 都 画 得 精细 ， 那 这 个 时 
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候 我 们 可 以 先 定 尺寸 。 当 然 这 里 说 的 “ 定 尺寸 ”不 是 让 你 把 页 面 内 所 有 图 标的 尺寸 都 定 
好 ， 而 是 说 优先 定 几 个 大 模块 的 尺寸 ， 例 如 顶 导 航 、 底 导航 、 个 人 中 心 等 。 


等 后 续 空 闲 的 时 候 我 们 再 去 细 化 这 些 图 标 ， 开 发 者 也 只 需要 换 张 图 , 不 影响 其 他 。 建 议 图 
标尺 寸 尽量 不 要 过 多 ， 例 如 32px、36px、40px、48px 都 有 , 这 样 会 显得 凌乱 无 序 , 而 且 
这 些 完全 可 以 统一 成 两 个 标准 , 例如 32px、48px 的 ， 因 为 图 标 是 可 以 有 留 白 区 域 的 , 也 就 
说 图 标本 身 大 小 可 以 是 40px, 但 是 切 图 尺寸 是 48px。 


这 样 做 的 好 处 就 是 图 标 大 小 种 类 较 少 ， 方 便 记忆 也 显得 专业 , 毕竟 谁 也 不 希望 最 后 整理 出 
来 的 规范 里 有 32px 的 图 标 2 个 、36px 的 图 标 2 个 、40px 的 图 标 2 个 , 这 样 并 没有 提高 效率 ， 
所 以 建议 图 标尺 寸 不 要 太 多 。 


6. 按钮 
按钮 规范 包括 它 的 大 小 、 色 值 、 圆 角度 以 及 默认 状态 、 点 击 状态 、 禁 用 状态 。 


按钮 H: 88px W: 600px / 距离 屏幕 左右 各 60px 


Normal (默认 ) 登录 


F: 32px 
C: #FFFFFF 


从 加 迪 罩 层 #000000 不 透明 度 20% 


登 加 追 罩 层 #FFFFFF 不 透明 度 50% 
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前 期 在 制定 规范 的 时 候 , 我 们 可 以 先 定 大 、 中 、 小 三 个 尺寸 的 按钮 样式 , 后 期 再 根据 实际 情 


况 做 修改 。 


如 果 你 的 App 内 很 多 按钮 都 是 文字 + 图 标的 , 那么 图 标的 大 小 以 及 它 和 文字 之 间 的 距离 也 


是 需要 规范 的 。 
7. 图 片 


图 片 包括 App 内 出 现 的 所 有 图 , 一 般 情况 下 都 是 产品 图 和 头像 。 需 要 注意 在 制定 规范 之 前 ， 
要 先 把 图 片 比例 定好 , 常见 的 比例 有 1 : 1、2 : 1、4 : 3、16 : 9 等 。 然 后 再 把 每 个 模块 所 
用 的 图 片 大 小 以 及 它 的 比例 标清 楚 , 如 果 图 片 有 圆 角 的 话 也 需要 注 明 。 


图 片 圆 角 10px 
4 
\ , 
200x112 250x140 326x184 
订单 列表 详情 页 礼包 详情 页 商品 大 图 产品 列表 页 


头像 的 尺寸 可 以 定 三 个 ， 大 中 小 各 一 个 ， 基 本 体 量 小 的 App 都 够 用 了 。 建 议 App 内 的 图 片 
比例 有 2 ~ 3 个 就 好 , 因为 这 涉及 后 台 上 传 , 比例 不 一 样 的 话 , 要 么 就 需要 开发 者 对 图 片 进行 裁 
剪 ， 要 么 就 需要 留 不 同 的 接口 , 后 期 分 别 上 传 。 无 论 哪 一 种 , 都 是 需要 额外 的 人 力 成 本 。 


2 多 过 


64x64 100x100 140x140 
评论 头像 列表 头像 个 人 中 心头 像 
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8. 导航 


1 ) 项 导航 


规范 内 容 包括 高 度 、 字 体 大 小 、 颜 色 ， 以 及 有 没有 分 割 线 , 有 的 话 也 要 标明 分 割 线 色 值 ; 
带 不 带 图 标 、 多 个 图 标的 间距 等 。 


导航 ' 顶 导航 高 88px 背景 #FFFFFF 顶 导航 分 割 线 色 值 ; #e9e9e9 


一 级 页 面 顶 导航 (4 个 底 tab) #333333 


eeee0 4G 全 4:21 PM *22% 面 了 


可 56 一 级 页 面 标题 36px - E56 到 


2 ) 底 导 航 
规范 内 容 基 本 同 顶 导航 类 似 。 要 区 分 文字 默认 和 选中 两 种 状态 的 色 值 。 


底部 导航 屏幕 均 分 文字 默认 22px #99999 选中 #FF5339 


自 四 & 


首页 商城 我 的 
合 命 bd 和 皇 
首页 卡 券 商城 我 的 


3 ) 二 级 导航 


主要 是 一 些 筛选 类 Tab, 需要 标明 文字 大 小 、 色 值 、 选 中 后 的 横 线 大 小 , 这 里 横 线 的 样式 目 
前 常见 的 有 两 种 , 一 种 是 固定 的 短线 , 不 管 上 面 文字 多 少 , 都 是 显示 一 样 的 短线 ; 还 有 一 种 是 
和 文字 一 样 长 的 , 无 论 哪 一 种 , 事先 都 需要 定义 一 下 。 


筛选 类 tab 屏幕 均 分 文字 默认 28px #999999 选中 #333333 


28px 文案 文案 文案 ”我 是 文案 
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9. 卡片 相关 


卡片 包括 很 多 模块 , 例如 卡片 标题 、 卡 片 列表 、 卡 片 基础 样式 , 建议 以 高 度 为 划分 , 如 果 内 
容 差 不 多 的 话 , 就 统一 高 度 。 例 如 都 是 图 标 + 文 字 ， 一 个 高 度 是 72px， 一 个 是 80px， 就 可 


以 统一 成 一 个 。 
Card Title 卡片 标题 
H:80px Font:26px #333333 
图 标 + 文字 + 图 标 


产品 列表 等 一 些 可 复 用 的 卡片 样式 都 可 以 做 到 规范 里 ， 统 一 样式 ， 后 期 修改 起 来 也 比较 
方便 。 


Card Content 基本 卡片 样式 Card 间 距 : 20px 


产品 | 列表 


滴 滴 出 行 30 元 代 驾 券 30px #333333 
20 福 币 #FF5339 28px 26px 


T20 


哪些 规范 可 暂 定 , 日 后 再 调整 


前 期 因为 各 种 各 样 的 原因 ， 例 如 时 间 不 够 、 无 法 预知 后 面 的 情况 等 ， 没 有 办 法 把 所 有 的 规 
范 都 定好 ， 这 时 候 我 们 可 以 对 一 些 后 期 改动 成 本 小 的 模块 暂时 确定 一 下 规范 ， 后 期 需要 修 
改 的 时 候 再 统一 调整 。 
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1. 图 标 风格 
在 规范 图 标的 时 候 ， 必 须 做 的 是 把 图 标 大 小 确定 ， 对 于 图 标本 身 的 样式 、 风 格 、 粗 细 等 可 
暂时 做 几 个 示意 的 样式 ， 等 所 有 界面 完成 后 ， 再 来 统一 绘制 。 


所 人 是 
三 了 拆 YY 
人 ”全 加 


2. 弹 窗 样 式 


很 多 时 候 我 们 并 不 清楚 界面 内 都 需要 什么 样 的 弹 窗 样式 ， 文 字 最 多 有 多 少 个 ， 所 以 我 们 可 
以 先 定 几 个 最 常用 的 ， 例 如 双向 操作 ( 含 确定 、 取 消 ) 弹 窗 、 单 向 操作 ( 只 有 一 个 操作 按 
钮 ) 弹 窗 。 


基本 弹 窗 ”Button H: 96px #FF5339 


双向 换 作 W: 580px 单 向 操作 W: 580px 


34px #333333 


是 文案 et 
leo #999999 行 高 5 
32px #333333 | 人 ER - 
哪些 规范 先 不 做 


空白 页 插画 、 缺 省 页 、 占 位 图 等 ， 这 些 可 以 先 不 用 急 着 做 ， 等 项 目 都 完成 后 ， 再 来 做 就 可 
以 了 。 前 期 项 目 紧急 的 时 候 ， 不 要 把 时 间 都 花费 在 这 些小 的 页 面 里 。 
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re em 

an A 

在 : 咯 
. = 
哇 ， 订 单 主 部 都 评论 充 了 ~ 没有 答谢 记录 呢 
空白 页 插画 

加 分 项 
1. 目录 


目录 相当 于 一 个 索引 ， 方 便 看 的 人 对 整个 规范 有 一 个 大 致 了 解 ， 而 且 能 帮助 团队 成 员 快速 
找到 自己 需要 的 内 容 。 


01 
字体 


2. 版 式 统一 

规范 文档 既然 是 统一 页 面 布局 、 方 便 团 队 协作 的 ， 那 么 它 本 身 就 应 该 统一 ， 例 如 每 页 格 
式 、 标 题 大 小 、 正 文字 号 及 颜色 等 都 需要 保持 一 致 ， 这 样 才 更 能 让 别人 相信 这 是 一 个 经 过 
深思 熟 虑 做 出 来 的 规范 文档 。 
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@ OO © 


高 度 间距 元 素 本 身 大 小 


囊 


再 例如 文档 里 所 有 间距 用 绿色 表示 、 元 素 用 紫色 表示 、 高 度 用 红色 表示 等 ， 让 每 个 颜色 的 
存在 都 变 得 有 规律 可 循 。 


画 重 点 


规范 本 身 的 作用 是 为 了 提高 团队 的 工作 效率 ， 不 要 顾此失彼 。 小 公司 的 产品 不 像 大 公司 体 
量 那么 大 ， 规 范 不 需要 完全 照搬 大 公司 的 ， 而 是 要 根据 自己 公司 的 实际 情况 ， 制 作出 一 个 
适合 自己 的 、 扁 平 快 的 规范 文档 ， 让 规范 能 真正 发 挥 它 的 作用 。 


制定 规范 的 时 候 不 要 想 着 一 次 性 全 部 都 定好 ， 要 有 主 次 ， 前 期 优先 定 一 些 重要 的 ， 例 如 设 
计 图 尺寸 、 页 边 距 、 颜 色 、 字 号 、 图 标 大 小 、 按 钮 、 图 片 比例 等 ;等 后 期 页 面 做 得 差不多 
的 时 候 ， 再 去 细 化 图 标 、 空 白 页 面 等 。 

记 住 最 重要 的 一 句 话 : 规范 要 能 真正 落地 ， 能 给 团队 其 他 成 员 带 来 切实 的 作用 。 不 要 流 于 
形式 ， 否 则 再 好 的 规范 没有 人 用 也 是 枉然 。 


参考 资料 
如 何 用 临摹 来 提升 你 的 设计 能 力 ”http://t.cn/Rim0S81 
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03 ”天 于 适 配 这 件 小 事 的 前 世 今 生 


文 / 吴 萌 


很 多 人 刚 做 UI 的 时 候 ， 根 本 不 知道 做 完 界面 还 需要 适 配 ， 以 为 把 设计 图 做 好 就 行 了 ， 其 
他 的 事情 跟 自己 没有 半点 关系 ， 实 际 踩 坑 之 后 才 发 现 问题 所 在 。 而 这 样 的 试 错 成 本 未 免 太 
高 ， 不 如 最 开始 准备 得 充分 一 点 。 


普 误 做 法 


正 是 由 于 部 分 设计 师 对 适 配 了 解 不 够 透彻 ， 以 至 于 实际 项 目 中 需要 把 750px 的 设计 稿 
适 配 到 640px、720px、1242px 的 屏幕 时 ， 都 选择 把 设计 稿 直接 等 比 拉 伸 至 对 应 的 尺 
寸 ， 然 后 再 重新 标注 。 殊 不 知 此 方法 不 仅 增加 了 几 倍 工 作 量 ， 还 会 导致 最 终 的 效果 不 
如 入 意 。 


下 面 以 QQ 首页 为 例 ， 左 图 是 750px (iPhone 6 ) 的 设计 稿 ( 临摹 ) 直接 拉 伸 至 1242px 
(iPhone 6 Plus ) 的 效果 ， 右 图 是 实际 线 上 1242px 的 界面 。 


群 助手 
@ 本 助手 外 PT 
ET 
OY. 
4a 担子 的 栓 子 


750px 直 接 拉 仲 1242px 截 图 
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相信 大 家 也 看 出 差别 了 ，750px 直 接 拉 伸 后 的 界面 元 素 整体 都 比 实际 线 上 1242px 的 大 。 


图 栓 子 的 检 子 。- :5 F 图 i 因 
二 二 


750px 直 接 拉 伟 1242px 截 图 


之 所 以 说 这 样 的 方法 是 错 的 ， 有 两 个 原因 : 一 个 是 按照 此 方法 ，750px 和 1242px 所 显示 
的 内 容 是 一 样 多 的 ， 但 实际 上 1242px 的 屏幕 要 比 750px 的 长 一 些 ， 显 示 的 内 容 更 多 一 些 
才 对 。 如 下 图 京东 金融 所 示 。1242px 是 3 倍率 下 的 大 小 ， 要 和 750px 做 对 比 ， 就 需要 换算 


到 2 倍率 下 的 828px 做 对 比 。 


上 aema2aaoo 


BB 全 从 
四 


MeNn158.69 
多 一 a 一 " 
s @ 0 画 下 © ny 
6 如 全 时 
ET 全 二 有 和 7. 瓜分 100 万 要 红外 
支付 优惠 
ro a] 
: 下 WN 
: © mw 日， 日 
sam Py ony 
9 画 © 


京东 金融 828px 


京东 金融 750px 


另 一 个 原因 就 跟 数 学 有 关 了 ，750px 的 页 面 要 放大 到 1242px 的 大 小 ， 需 要 放大 1.65 倍 ， 
但 实际 上 750 是 2 倍率 下 的 界面 ，1242 是 3 倍率 下 的 界面 ， 它 们 的 比例 实际 上 是 1 : 1.5， 


而 不 是 1 : 1.65。 


750px 直 接 拉 伸 比 例 实际 比例 
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也 就 是 说 ， 由 750px 直 接 拉 升 到 1242px 的 稿子 在 开发 者 实现 的 时 候 会 出 现 这 样 的 情况 : 

图 标 是 1.5 倍 的 大 小 ( 图 标 实现 的 时 候 用 的 是 3 售 率 切 图 文件 ) ， 而 文字 、 间 距 、 图 片 却 
是 1.65 倍 的 大 小 ， 标 注 稿 也 是 按照 1.65 售 来 标注 的 。 这 样 就 会 影响 到 开发 布局 ， 导 致 出 
现 一 系列 误差 。 


750px 1242 PX (正确 版 x1.5) 1242 PX ( 拉 伸 版 x1.65) 
100x100 150x150 165x165 


由 下 图 可 见 ， 当 我 们 直接 在 拉 促 的 设计 稿 中 标注 间距 、 图 标 大 小 上 时， 实际 开发 的 图 标尺 十 
会 比 我 们 标注 得 要 小 ， 相 差 15px， 这 个 时 候 如 果 开 发 者 完全 按照 标注 稿 来 布局 ， 就 会 导致 
有 图 标的 区 域 间距 明显 和 其 他 地 方 不 一 样 ， 相 差 太 大 时 甚至 会 出 现 图 标 变形 的 情况 。 


165 


国 开发 时 比 设计 稿 多 出 来 的 区 域 


既然 直接 拉 伸 设计 稿 的 方法 不 可 行 ， 那 么 难道 只 能 为 每 个 屏幕 尺寸 都 重新 做 一 套 设计 吗 ? 
当然 不 是 ， 这 样 的 开发 成 本 太 大 ， 而 且 也 没有 必要 。 


为 什么 不 能 一 稿 适 配 所 有 


大 多 数 人 对 于 750px 适 配 到 1242px 都 表示 能 理解 ， 但 对 于 750px 适 配 到 720px 就 理解 不 
了 ， 持 反对 意见 ， 觉 得 这 属于 iOS 和 Android 两 个 不 同 的 端 ， 标 签 栏 和 导航 栏 高 度 都 不 
一 样 ， 不 单独 输出 设计 稿 的 话 ， 图 标 、 图 片 会 变形 ， 间 距 会 太 罕 等 。 


那 下 面 就 来 一 一 解释 下 大 家 对 于 750px 适 配 到 720px 存 在 疑惑 的 点 。 
1. 图 标 变形 


开发 者 在 做 的 时 候 都 是 用 的 2 倍率 、3 售 率 的 切 图 ， 哪 个 屏幕 尺寸 用 哪 套图 是 根据 倍率 来 选 
择 的 ， 同 一 个 倍率 下 的 图 标 大 小 、 间 距 、 字 号 都 是 一 样 的 。 
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2 倍率 3 倍率 


2. 图 片 变形 


图 片 都 是 按照 比例 来 设置 的 ， 只 要 标注 的 时 候 只 标注 比例 ， 而 不 是 把 宽 高 都 限制 死 ， 适 配 


不 统一 的 问题 是 可 以 避免 的 。 


中 国际 动 全 09:41 B7064%m 
精 选 “要 看 ”如 有 B 传 电视剧 电影 如 一 


天 用 务 @ 作 上 年 950 1 Q am 内 目 @ 


精 选 时 绰 如 型 传 电视 剧 电 二 
i | ] 16:9 ] 


【法 医 泰 明 痒 存 者 】 十 年 了 ! 连 坏 杀 手 克 是 身边 人 ? 


【2018 划 条 秋季 新 品 发 布 会 同 传 版 】 全 程 


精彩 看 不 个 》 #9 直 战 纪 最 强 接 档 更 生 


腾讯 视频 640 px 腾讯 视频 750 px 


3. iOS 和 Android 的 平台 差异 


有 一 些 人 总 认为 这 两 个 平台 存在 差异 性 ， 例 如 它们 的 导航 栏 、 标 签 栏 、 时 间 栏 不 一 样 大 ， 
怎么 能 统一 适 配 呢 ?其 实 头 部 的 导航 栏 、 时 间 栏 和 底部 的 标签 栏 这 些 平台 的 基础 控件 ,与 


界面 内 的 元 素 不 在 一 个 > 轴 上 ， 它 们 属于 界面 最 上 层 ， 界 面 的 尺寸 也 不 受 它们 的 影响 。 


如 下 图 所 示 ， 哗 哩 哗 哩 在 Android 和 iOS 平台 下 的 基础 控件 不 一 样 ， 但 是 并 不 会 影响 到 导 
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航 栏 下 方 的 Tab 栏 的 高 度 。 所 以 事实 证 明 ， 适 配 跟 平台 并 没有 太 大 的 关系 。 


Lpt 页 季 赛 | 9 月 12 日 。 LPL 夏季 赛 | 9 月 10 日 
JDGvsRW JDGwIG 


[LPL 到 学费 ] 9 月 12 日 ILPL 可 竹 碍 | 9 月 10 日 
JDG ws FW JDG w IG 


a 多 $a 入 


哗 哩 哗 哩 720px(Android) 哗 哩 哗 哩 750px(iOS) 


掌握 正确 的 适 配 规则 


1. 倍率 相同 
适 配 需要 在 同一 倍率 下 ， 如 果 不 是 则 需要 换算 到 相同 倍率 ， 再 进行 适 配 。 既 然 要 做 比较 ， 
当然 要 在 同一 水 平 线 上 ， 总 不 能 让 姚明 跟 林 丹 去 比 羽毛 球 吧 。 


知道 手机 的 屏幕 分 辨 率 和 倍率 之 后 ， 就 可 以 算出 在 其 他 倍率 下 ， 屏 幕 分 辨 率 是 多 少 。 例 如 
iPhone 6 的 分 辩 率 是 750 x 1334 ( 2 倍率 下 ) ， 乘 以 1.5 之 后 就 可 以 算出 3 倍率 下 的 大 小 。 


同 理 可 得 其 他 了 


X1.5 
750 x 1334 1125 x 2001 


标准 大 小 2 倍率 下 3 倍率 下 


机 的 屏幕 分 辨 率 在 不 同 倍率 下 的 大 小 ， 红 框 处 表示 正常 的 分 辩 率 大 小 。 
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2 倍率 3 倍率 
iPhone 5/5c-5s 960x1704 
iPhone 6/7/8 { 750x1334 》 1125x2001 


iPhone 6p/7p/8p 828x1472 


红 米 NOTE 等 机 型 


1080x1920 


华为 mate 8 等 机 型 720x1280 {1080x920 } 


适 配 只 跟 倍 率 相关 ， 同 一 倍率 下 ， 界 面 上 的 间距 、 文 字 大 小 、 图 标 大 小 是 一 样 的 ， 不 同 
的 只 是 屏幕 显示 内 容 的 宽度 和 高 度 不 同 ， 所 以 说 在 2 倍率 下 ，720px、750px、640px、 
828px 页 面 上 的 元 素 大 小 相同 ; 在 3 倍率 下 ，960px、1080px、1125px、1242px 页 面 上 
的 元 素 大 小 相同 。 


下 面 以 虾米 音乐 为 例 ， 分 别 对 比 640px、720px、750px 页 面 上 的 元 素 大 小 ， 证 实 界面 上 
的 间距 、 文 字 大 小 、 图 标 大 小 都 是 一 样 的 。 


栓 子 的 查 子 
栓 子 的 栓 子 


2705 4 0 1 


让 中 心 @ bd 
gn DO 1 
EO [oss ns PE 玫 
虾米 音乐 640px 虾米 音乐 720px 虾米 音乐 750px 


2. 适 配 三 原则 
在 适 配 的 时 候 通 常会 遵循 三 个 原则 : 等 比 缩放 、 弹 性 控件 、 文 字 流 自 适应 。 
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门口 
要 门 癌 


等 比 缩放 弹性 控件 字 流 自 适应 
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1 ) 等 比 缩放 
等 比 缩放 指 的 是 该 元 素 的 尺寸 大 小 并 不 是 固定 的 ， 是 会 跟随 着 屏幕 的 大 小 ( 一 般 是 宽度 ) 
变化 而 变化 。 如 下 图 App Store 的 搜索 结果 页 ， 单 个 预览 图 的 比例 是 16 : 9， 不 管 屏幕 分 


状 率 如 何 变化 ， 图 片 比例 并 不 会 发 生变 化 。 


天 Sm 卡 于 7 ot sam 
虾米 音乐 加 取消 
和 全 Ta I 是 米 音 乐 -听见 不 同 (… 
虾米 音乐 外 取消 二 页 和 奋 


一 一 了 =- 一 | 
EY A 


? = 哆 4 


App Store 640px App Store 750px 
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标注 的 时 候 ， 我 们 也 只 需要 标注 好 页 边 距 、 图 片 比例 、 图 片 间距 就 好 ， 开 发 者 就 可 以 把 适 
配 规 则 写成 随 屏幕 宽度 变化 而 变化 。 


计算 方式 : 


(屏幕 尺寸 -左右 页 边 距 -图 片 间距 ) /3， 得 出 图 片 
宽度 ， 再 根据 图 片 比例 ， 得 出 图 片 高 度 


(750-40-40-16-16) /3 =212 


根据 图 片 比例 16 :9 , 得 出 图 片 的 高 度 
高 =212/9*16=377 


2 ) 弹性 控件 
弹性 控件 指 的 是 元 素 尺寸 不 变 ， 间 距 随 着 屏幕 的 宽度 自 适 应 ， 屏 幕 越 宽 ， 间 距 越 大 。 


天 sn 直下 1 EE 
设置 
Be te 图 向 
设置 国 呈 寺 5 六 
国有 [7 国 
图 aisxe 国 Aisms 
图 um 图 ssas 
图 zs 贺 ate2pssa 
图 snsias 国 sosxems 
国 Mt psea [= 
国 sos sa Om 
[= 
i Tunes Store 与 App Store 


国 ses Applepay 


TTunes Store 与 App Store 
[eo 


设置 640px 设置 750px 
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3 ) 文字 流 自 适 应 


一 行 能 显示 的 文字 数量 和 屏幕 宽度 成 正比 ， 屏 幕 越 宽 ， 一 行 能 显示 的 文字 数量 也 就 越 多 。 


小 米 商城 640pX 小 米 商城 750px 


3. 适 配 跟 平台 基础 控件 无 关 


其 实 并 不 是 界面 的 所 有 元 素 都 需要 进行 适 配 ， 我 们 只 需要 适 配 中 间 那 一 块 区 域 即 可 。 


平台 基础 控件 


eeee 


词 号 头条 WW 秋 竹 权 色 届 开 美 ， 你 怎么 和 错过 也 ? 


沪 国 汪 -1 
2 


四 出 。| 平 台 基 机 控件 
ER a 


第 2 章 ”能 力 效率 提升 137 


而 上 下 导航 栏 的 高 度 不 固定 ， 每 个 平台 的 高 度 不 一 样 。 例 如 iOS 的 导航 栏 是 
88px，Android 有 112px、104px 等 。 但 是 不 管 高 度 如 何 ， 只 需要 做 到 让 元 素 居 
中 即 可 。 


4. 实际 案例 

说 了 那么 多 ， 是 时 候 来 分 析 一 个 实际 的 案例 了 。 适 配 其 实 总 结 起 来 就 三 个 步骤 : 先 换 算 至 
同一 个 倍率 ， 再 去 调整 界面 元 素 ， 最 后 将 调整 好 的 界面 按照 倍率 还 原 到 最 开始 需要 适 配 的 
尺寸 。 


同一 个 倍率 下 


先 将 需要 适 配 的 两 个 尺寸 换算 至 同一 个 比例 


适 配 三 原则 


再 根据 适 配 三 原则 调整 界面 元 素 的 位 置 和 间距 


实际 倍率 


最 后 将 调整 好 的 界面 按照 倍率 还 原 至 最 开始 需要 
适 配 的 尺寸 


以 750px (iPhone 6 ) 适 配 至 1242px 首 先 适 配 需要 在 同一 个 倍率 下 ，750 x 1334 
是 2 倍率 下 的 ，1242 x 2208 是 3 倍率 下 的 ， 根 据 倍 率 换算 后 者 的 2 倍率 大 小 是 
828x 1472。 


所 以 要 想 将 750 x 1334 适 配 至 1242 x 2208， 就 需要 先 把 750 x 1334 适 配 至 
828 x 1472， 然 后 再 将 调整 好 的 界面 x 1.5 到 1242 x 2208。 
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EE 
群 助手 
[2 个 各 有 新 消息 】 
微 视 仿 
如 何 机 智 应 对 文 友 持 问 ? 和 来 在 这 星 。 二 
“由 ”柱子 的 要 子 
[ 田 片 ] IMG_4290PNG © 
我 的 电脑 
怕 时 加 珀 于 认 拆 折 发 ， 半 时 练 字 码 字 菇 .。 合 


洛 可 可 


腾讯 新 闻 

杨 填 暂 身 曝光 面值 痊 本 可 

小 五 
Oa 


x1.5 
750x1334 2 倍率 参 ”828x1472 2 倍率 4 1242x2208 3 倍率 


其 他 的 例如 750px 如 何 适 配 至 720px、640px， 原 理 是 一 样 的 ， 它 们 的 倍率 是 一 样 的 ， 就 
省 了 头 尾 的 那 两 步 ， 只 需要 根据 适 配 三 原则 调整 界面 元 素 即 可 。 


需要 注意 的 点 
1. 小 屏幕 适 配 


我 们 的 设计 尺寸 基本 都 是 用 750px 的 居多 ， 这 就 会 涉及 小 屏幕 的 适 配 问题 ， 当 一 个 元 素 在 
750px 上 显示 效果 很 完美 ， 到 640px 上 可 能 就 放 不 下 了 。 所 以 在 作 图 的 时 候 ， 设 计 师 需要 
用 动态 的 眼光 去 考虑 问题 。 下 面 就 来 讲述 几 个 最 常 出 现 的 问题 。 


1 ) 弹 窗 

如 下 图 弹 窗 的 样式 ， 在 设计 尺寸 为 750px 上 显示 很 完美 ， 但 是 不 做 任何 调整 ， 直 接 适 应 到 
640px 的 屏幕 上 ， 就 放 不 下 了 。 所 以 这 个 时 候 ， 我 们 就 需要 定义 一 些 适 配 规则 ， 例 如 在 小 
屏幕 缩小 字号 、 缩 小 间距 等 。 
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字号 缩小 2px (24px) ， 左 右 间距 
改 成 32px， 屏 幕 均 分 


设置 当前 所 在 年 级 


二 生机 朋 问 吉 全 着 学 年 人 年 加 


设置 当前 所 在 年 级 


贡生 阳 和 请 新 子 年 的 轩 姐 


MM 


= 


2 ) 文字 截断 距离 

屏幕 的 大 小 会 直接 影响 到 每 行 显示 的 字数 ， 当 一 行文 字 的 右 侧 有 元 素 的 时 候 ， 就 涉及 文 
字 和 元 素 之 间 的 安全 截断 距离 ， 也 就 是 文字 最 多 能 显示 的 区 域 。 很 多 时 候 设 计 师 在 做 设 
计 稿 的 时 候 ， 没 有 考虑 到 文字 的 极端 情况 ， 这 就 导致 在 小 屏幕 的 时 候 ， 文 字 和 元 素 产生 
重重 现象 。 


例如 下 图 爱 奇 艺 “ 我 的 ”页 面 ， 在 750px 的 界面 上 昵称 显示 得 很 完整 ， 但 是 到 640px 上 就 
显示 不 全 ， 这 就 需要 我 们 定义 一 下 文字 可 显示 的 区 域 ， 当 文字 长 度 超过 这 个 区 域 的 时 候 ， 
部 分 文字 省 略 ， 用 “.…” 代 蔡 。 


Ca 查 子 的 栓 Ca 橙子 的 林子 Mandy 


爱 奇 艺 640px 爱 奇 艺 750 px 


2. 平台 差异 


iOS 和 Android 两 端的 系统 级 别 的 控件 样式 不 同 ， 所 以 我 们 可 以 为 两 端 单独 做 几 个 样式 ， 
这 个 成 本 不 大 ， 效 果 却 很 好 。 例 如 iOS 平台 的 搜索 是 矩形 框 ， 而 Android 平台 的 搜索 是 
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下 画 线 。 
抢 800 元 
训 有 预定 关于 元 
ey 
eeeoe  w ES 
和 泣 多 只 条 WN 各 和 和， 作 和 么 能 铺 过 7 
办 国人 
一] < 有 好 货 加 和 加 oe bh 
G3 回 天 天 特价 巴 [| 
县 下 三 必 买 清单 aa ees 外 
2 人 
淘宝 720px(Android) 淘宝 750px(iOS) 
3. 单 屏 页 面 


大 部 分 的 界面 适 配 都 是 考虑 屏幕 宽度 居多 ， 高 度 只 会 影响 一 屏 内 显示 内 容 的 多 少 ， 屏 幕 
高 显示 的 内 容 就 长 一 点 。 对 于 瀑布 流 布局 来 说 ， 高 度 根本 不 需要 进行 适 配 。 但 总 是 有 一 
些 特殊 的 单 屏 页 面 ， 例 如 : 空白 页 面 、 音 乐 播放 页 面 等 需要 在 所 有 屏幕 上 显示 一 样 多 的 


内 容 。 


1 ) 空白 页 面 
类 似 下 图 “我 的 看 单 ” 这 种 比较 简单 的 页 面 ， 如 果 固定 上 方 间 距 ， 那 么 在 大 屏幕 上 就 
会 显得 内 容 偏 上 。 这 个 时 候 要 想 让 所 有 屏幕 显示 的 内 容 都 一 样 ， 可 以 将 上 方 和 下 方 的 
空白 区 设置 一 个 尺寸 比例 ， 这 样 不 管 在 什么 屏幕 上 ， 内 容 相 较 于 整个 屏幕 来 说 ， 位 置 
都 是 一 样 的 。 


体 计算 方法 : 屏幕 高 度 减 去 上 下 导航 ， 再 减 去 内 容 区 域 的 高 度 ， 剩 下 的 区 域 按照 比例 来 
分 配 。 图 中 是 上 方 占 3/7， 下 方 占 4/7。 
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i 
a : 
| 
和 
人 
煌 的 看 单 还 没有 悉 j 加 视 琐 
您 的 看 单 于 没有 新 加 视 频 
| | 
4 
2 ) 音乐 播放 页 面 
这 个 页 面相 较 于 空白 页 面 来 说 ， 要 复杂 一 些 ， 但 是 原理 是 一 样 的 。 把 能 够 按照 基础 适 配 规则 


的 地 方 固 定 下 来 ， 留 一 些 自 适 应 的 部 分 。 例 如 下 


网 易 音 乐 ， 同 样 是 2 倍率 下 的 界面 ， 播 放 


图 


操作 


区 域 的 高 度 都 是 一 样 的 按照 基础 适 配 规则 来 的 ， 而 光盘 


区 域 则 是 固定 左右 间距 得 出 。 


网 易 云 音乐 640 px 


计 


三， 


适应 的 只 有 绿色 矩形 区 域 ， 其 实 读者 有 没有 发 现 ， 把 这 个 图 简化 


需要 根据 屏幕 高 度 


就 和 上 面 讲 的 空 


页 面 的 适 配 方法 一 样 了 。 不 过 需要 注意 的 是 自 适应 的 部 分 不 要 超过 两 


后 


处 ， 超 过 两 处 之 


， 界 面 变数 太 大 ， 不 利于 计算 ， 也 没 太 大 必要 。 
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比例 自 适应 
图 规则 适 配 


设计 稿 尺寸 


设计 稿 尺寸 在 我 看 来 并 没有 特别 本 质 的 区 别 。 从 原理 上 来 看 ， 你 可 以 用 任何 想 用 的 设计 尺 
寸 ; 只 不 过 从 适 配 的 角度 来 说 ，750px ( 2 倍率 ) 、720px ( 2 倍率 ) 、375px ( 1 倍率 ) 
这 三 个 尺寸 相对 更 合适 些 。 


我 自己 之 前 用 过 750px， 也 用 过 720px， 那 时 候 就 想 不 明白 为 什么 还 有 人 用 1 倍率 作 图 ， 现 在 
市 面 上 都 没 1 倍率 的 手机 了 ， 用 1 倍率 作 图 导出 2 倍率 、3 倍 率 图 标 不 都 虚 边 了 吗 ? 但 后 来 换 了 
一 个 新 工作 ， 同 事 都 是 用 375px ( 1 倍率 ) 作 图 ， 习 惯 了 之 后 发 现 两 者 并 没有 太 大 的 区 别 。 


只 是 有 些 图 标 不 是 整数 的 时 候 ， 需 要 手动 导出 2 倍率 、3 倍 率 版 本 ， 但 其 实 就 算 用 750 ( 2 
倍率 ) 作 图 怕 图 标 虚 边 ， 也 还 是 要 手动 导出 3 倍率 的 ， 所 以 都 一 样 。 用 1 倍率 的 好 处 是 ， 很 
多 国外 的 资源 都 是 用 1 倍率 做 的 ， 就 可 以 直接 倍率 了 。 


不 过 需要 注意 的 是 ， 当 在 1 倍率 下 做 分 割 线 的 时 候 ， 需 要 改 成 0.5px， 这 样 导出 2 倍率 图 后 
会 是 1px。 建 议 分 割 线 用 内 阴影 做 ， 而 不 要 直接 用 0.5px 的 线 。 


小 技巧 


作 图 的 时 候 如 果 想 要 知道 当前 页 面 的 元 素 在 小 屏幕 上 是 否 放 得 下 ， 总 不 能 每 次 都 把 当前 页 
面 拖 动 到 小 屏幕 上 看 看 实际 效果 ， 这 样 成 本 太 大 。 其 实 有 一 个 非常 简便 的 方法 可 以 解决 这 
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个 问题 。 
750px 和 640px 的 界面 相差 110px ( 2 倍率 下 ) ， 我 们 只 需要 在 750px 的 界面 上 减 去 
110px， 看 是 否 能 放 得 下 界面 元 素 ， 如 果 放 得 下 ， 就 表示 在 小 屏幕 上 也 能 全 显示 。 


mo 
中 国 移 动 全 09:41 O75 


精 选 受 看 8 传 电视 剧 电 ; 二 


Q ms a us 


如 果 想 要 知道 字数 是 否 能 放 得 下 ， 也 可 以 通过 计算 的 方式 得 出 结论 。 用 110px 除 以 字号 
小 ， 就 可 以 得 出 小 屏幕 的 比 设计 稿 少 显示 几 个 字 。 例 如 字号 是 30px， 在 750px 的 屏幕 上 能 
显示 30 个 字 ， 那 么 在 小 屏幕 上 就 只 能 显示 26 个 字 了 。 


ED 3 
画 重点 


适 配 这 个 概念 很 特殊 ， 它 看 起 来 很 简单 ， 简 单 到 大 多 数 人 都 觉得 自己 会 了 ， 不 用 再 去 研究 
了 ， 但 其 实 只 懂 了 皮毛 ， 并 不 清楚 原理 。 例 如 很 多 人 都 说 自己 会 PS ， 但 跟 那 些 专业 的 人 
员 比 起 来 ， 你 自己 所 知道 的 不 过 是 冰山 一 角 。 所 以 我 们 要 时 刻 保持 一 颗 求 知 的 心 ， 不 要 限 
于 已 有 的 知识 。 


最 后 总 结 一 下 全 文 最 重要 的 几 点 ， 帮 助 大 家 加 深 印 象 。 
(1 ) 等 比 拉 伸 界 面 去 适 配 的 方法 是 错误 的 ， 也 是 极其 浪费 人 力 成 本 的 ; 


( 2 ) 适 配 跟 平台 无 关 ， 只 跟 倍 率 相 关 ，750px 和 720px 的 尺寸 从 适 配 的 角度 来 看 ， 都 是 
一 样 的 ， 只 是 界面 尺寸 相差 了 30px:; 


(3 ) 适 配 三 原则 : 等 比 缩放 、 弹 性 控件 、 文 字 流 自 适 应 ; 


(4 ) 适 配 尺寸 不 要 标 死 ， 要 用 动态 的 眼光 去 看 。 做 的 时 候 需 要 考虑 极端 情况 ， 最 常见 的 
例如 小 屏幕 适 配 问题 等 。 
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04 如何 高 效 地 进行 验收 


文 / 吴 萌 


一 直 以 来 , 设计 验收 都 不 太 受 重视 , 设计 师 总 是 习惯 于 把 时 间 用 在 雕琢 设计 稿 上 , 而 忽略 掉 
后 期 的 设计 验收 。 这 就 导致 程序 员 在 修改 Bug 的 时 候 , 常常 需要 多 次 修改 才能 还 原 设计 稿 


变 , 多 花费 几 分 钟 ， 就 能 大 大 提高 Bug 的 修改 效率 。 


关于 设计 验收 


之 所 以 验收 不 受 重视 ， 我 觉得 主要 有 两 个 原因 : 一 个 是 对 自己 和 合作 的 程序 员 极 其 自信 ， 
认为 对 方 能 领会 自己 所 有 的 点 , 会 完全 按照 设计 稿 来 ; 另 一 个 是 设计 师 没有 意识 到 验收 的 
重要 性 , 潜意识 里 认为 最 后 开发 的 效果 不 好 是 开发 人 员 的 责任 ， 跟 自己 没有 关系 。 


1. 错误 的 做 法 


1 ) 口头 说 明 

在 实际 工作 中 很 多 设计 师 发 现 问题 后 ， 只 是 口头 告诉 开发 者 哪里 要 改 ， 这 种 方式 很 容易 出 
现 你 说 了 10 个 ， 但 开发 者 只 记得 6 个 ， 最 终 只 改 对 了 4 个 的 情况 。 重 复 返 工 以 及 沟通 的 时 
间 太 长 ， 效 率 不 高 。 当 然 在 这 种 口头 说 明 的 方法 之 下 还 产生 了 一 个 进 阶 版 ， 就 是 搬 个 小 板 
使 坐 到 开发 者 面前 指 哪 改 哪 ， 但 这 个 也 仅 限 于 对 接 开发 人 员 少 的 时 候 ， 当 你 同时 对 接 三 五 
个 开发 者 的 时 候 ， 是 没有 时 间 、 精 力 这 么 做 的 ， 而 且 工 作 效 率 也 很 低 。 


2 ) 让 开发 者 去 找 之 前 的 标注 稿 

验收 的 时 候 发 现 有 问题 ， 让 开发 者 自己 去 找 之 前 的 标注 稿 ， 对 照 着 修改 ， 这 样 的 做 法 很 容 
易 出 现 改 了 但 是 没 改 到 位 ， 重 复 返 工 。 例 如 ， 设 计 稿 的 元 素 大 小 是 20px， 第 一 次 开发 者 做 
的 是 27px， 一 轮 验收 后 他 自己 回去 对 照 标注 稿 修 改 ， 改 成 了 18px。 这 就 意味 着 你 在 二 轮 
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验收 的 时 候 还 得 去 提 这 个 问题 ， 时 间 成 本 浪费 较 大 。 


作为 设计 师 ， 我 们 每 天 都 是 跟 像素 打交道 ， 间 距 、 字 号 差 个 几 像素 ， 我 们 一 眼 就 能 看 出 
来 。 但 是 作为 每 天 跟 代 码 打交道 的 开发 者 来 说 ， 差 了 几 像 素 在 他 们 眼 里 是 没 区 别 的 ， 所 以 
我 们 需要 明确 地 告诉 他 这 里 移动 几 像素 ， 那 里 字号 改 大 几 像素 。 


这 就 跟 谈 恋 爱 一 样 ， 男 生 和 女生 的 思维 很 不 一 样 ; 同 理 ， 设 计 师 和 开发 者 的 思维 也 是 不 一 
样 的 。 我 们 在 验收 的 时 候 ， 可 以 稍微 改变 一 下 方式 ， 多 站 在 开发 者 的 角度 考虑 问题 ， 前 期 
多 花 几 分 钟 ， 就 能 有 效 减 少 双方 后 续 的 沟通 时 间 。 


2. 正确 的 做 法 


1 ) 截图 验收 

验收 的 时 候 ， 我 们 需要 对 开发 实现 后 的 效果 进行 截图 ， 与 设计 稿 做 对 比 。 当 然 不 是 所 有 的 
图 都 需要 截 ， 可 以 先 体验 一 下 ， 看 看 哪里 有 问题 ， 不 太 对 劲 ， 然 后 再 截图 对 比 。 不 过 当 我 
们 经 验 不 足 的 时 候 ， 可 以 都 截图 去 做 对 比 ， 确 保 万 无 一 失 。 


原则 上 ， 主 流 的 各 个 尺寸 的 机 型 都 需要 去 验收 ， 但 在 实际 中 因为 各 种 原因 限制 ， 很 难 
验收 所 有 的 机 型 ， 一 般 主 要 去 验收 iPhone 的 大 、 中 、 小 屏幕 ，Android 的 大 、 小 屏 
幕 ， 其 他 的 屏幕 大 致 看 一 些 效果 ， 如 果 是 特殊 的 屏幕 就 根据 用 户 使 用 量 来 决定 是 否 要 
进行 验收 。 


2 ) 和 设计 稿 做 对 比 
截图 完毕 之 后 ， 就 需要 和 设计 稿 做 对 比 了 。 我 们 可 以 直接 把 截图 放 在 设计 图 上 方 ， 降 低 透 
明度 ， 大 致 比 对 下 ， 就 知道 哪里 有 出 入 ， 然 后 再 具体 标注 参数 。 
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【1 
© samme @ 
34 @@ 图标 需 要 更 换 ，48x48 
RN @ 文字 改 成 30px #333333 
© ad @@ 分 天 线 在 所 有 屏幕 都 是 1px #e9e9e9 
© a @@ 最 后 一 行 的 颜色 改 成 白色 #ffffff 
高 度 缩小 12px (40px) 
0 
合 自 a 


Wr 


这 其 中 也 有 几 个 小 技巧 。 当 图 标 切 图 错误 的 时 候 ， 直 接 注 明 该 图 标 需 要 更 换 ， 图 片 比 
例 不 对 的 时 候 也 一 样 。 总 之 ， 原 则 就 是 写 得 简洁 明了 ， 让 人 一 眼 就 能 看 懂 。 举 个 例 
子 ， 设 计 稿 做 的 间距 是 40px， 开 发 实现 后 的 效果 是 52px， 这 个 时 候 我 们 可 以 直接 标明 
间距 缩小 12px， 因 为 这 样 程序 员 就 只 需要 在 原来 设置 的 参数 上 减 12px， 而 不 用 再 去 算 
参数 了 。 


@@ 高 度 缩小 2px (40px) 


pe 


{to 


验收 需要 注意 的 问题 


1. 分 割 线 

在 验收 的 时 候 要 特别 注意 分 割 线 的 问题 ， 分 割 线 在 所 有 屏幕 上 都 是 1px， 但 是 很 多 程序 员 
没有 注意 这 个 ， 或 者 说 设计 师 在 开发 前 没有 特别 说 明 ， 程 序 员 就 写成 了 1pt。 因 为 pt 是 1 倍 
率 下 的 单位 ，px 是 实际 单位 ， 所 以 在 做 分 割 线 的 时 候 ， 单 位 需要 是 px， 这 样 才能 保证 每 个 
屏幕 的 分 割 线 都 是 1 像素 。 
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pt、px 关系 图 


2. 文字 截断 范围 
当 文字 左右 两 边 有 留 白 的 时 候 ， 我 们 需要 标明 文字 可 显示 的 范围 ， 当 文字 字数 超过 范围 
时 ， 需 标明 是 折 行 还 是 显示 “...”。 


售后 申请 申请 记录 


订单 编号 ;544576151676791 下 单 时 间 ; 2017/08/2115:16 
文生， 24 
sm Apple iPhone 8 (A1863) 64GBr 
4 金色 移动 联通 电信 4G 手 机 
顾 色 : 会 色 版 本 : 全 网 通 版 
9999 福 币 ] 
所 人 单 才 要 确认 收 寺 后 才 古 有 下 人 后 让 请 售后 
订单 编号 :544576151678791 下 单 时 间 : 2017/08/211545 
掌 间 (iReader) 全 新 轻薄 6.8 英 十 
纸 质 级 墨水 屏 8G 超 大 存储 电 纸 .… 


辣 色 : 黑色 版 本 : 悦 训 浙 
1T199 福 币 ] 


早期 设计 稿 


147 


148 


UI 那些 事 儿 : 新 手 设 计 师 的 成 长 之 路 


3. 小 屏 适 配 问 题 

设计 师 普遍 用 的 设计 尺寸 都 是 750px ( 1 倍率 为 375px ) ， 一 些 排 版 也 是 基于 这 个 尺寸 
的 ， 那 么 对 于 640px 的 手机 来 说 ， 某 些 地 方 就 会 出 现 排 不 下 的 情况 。 这 个 时 候 需 要 设计 师 
在 做 设计 稿 的 时 候 就 考虑 这 一 点 ， 并 给 出 适 配 规则 。 在 后 期 验收 的 时 候 也 特别 需要 去 注意 
这 个 问题 。 


字号 缩小 2px (24px) ， 左 右 间距 
改 成 32px， 屏 幕 均 分 


设置 当前 所 在 年 级 


六 :由 位 其 间 请 下 提 白 学 年 的 年 和 


设置 当前 所 在 年 级 


二” 半角 册 问 请 选择 新 学 年 的 年 


小 学 出 段 


vA 


猿 辅导 750px 猿 辅 导 640px 


4. 沟通 不 到 位 导致 的 问题 
有 一 些 页 面 有 很 多 种 实现 方式 ， 如 果 前 期 没有 跟 开发 者 沟通 清楚 ， 就 会 导致 最 终 实现 的 效 
果 存 在 误差 。 如 果 页 面前 期 单 给 一 张 静 态 图 ， 开 发 者 根本 不 知道 设计 师 想 要 的 实现 方式 是 
什么 ， 是 固定 间距 还 是 控制 左右 距离 或 中 间 自 适应 。 最 后 很 大 可 能 就 会 按照 自己 的 理解 去 
做 了 ， 导 致 出 现 重复 返工 的 现象 。 


验收 文档 


当 验 收 页 面 较 少 时 ， 可 以 直接 把 修改 意见 发 给 对 应 的 开发 者 ; 但 是 如 果 同 一 批 次 验收 的 
图 较 多 时 ， 这 一 方式 就 不 太 适 合 了 ， 开 发 者 容易 漏 看 某 一 张 图 ， 导 致 没有 修改 。 此 时 建 
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议 整理 一 个 文档 ， 把 修改 意见 统一 放 到 一 个 文档 里 ， 推 荐 使 用 石墨 文档 或 者 其 他 在 线 协 
同 软 件 。 


问题 描述 位 置 。 。 截图。 设计 稿 。PI 作 要 发 修改 进度 。。” 皇 查 问题 扒 述 于 发 修改 进度 “复查 


1. 字号 改 成 30px 


2. 间距 增 大 20px 详情 页 Re v 
按钮 颜色 需要 改 成 、 按钮 没有 
#ff7400 详情 页 done x 点 击 态 done Vv 
a 
2 胡 和 六 ee [ 工 国 -a 
成 123 (具体 参考 截 杭 my 
图 ) 
验收 文档 


在 验收 文档 里 ， 需 要 包含 以 下 几 个 元 素 : 问题 描述 、 当 前 问题 出 现在 哪个 位 置 、 问 题 页 面 
截图 、 设 计 稿 截图 、PM/ 开 发 者 回复 、 修 改进 度 、 复 查 等 ， 具 体 需要 放 哪 些 视 情况 而 定 。 


整理 了 一 个 表格 之 后 ， 开 发 者 可 以 一 条 一 条 地 修改 ， 不 至 于 遗漏 ; 设计 师 也 能 直观 地 看 
到 开发 者 的 修改 进度 ， 以 及 哪些 地 方 改 不 了 ， 是 什么 原因 导致 的 ， 沟 通 起 来 更 顺畅 也 更 
高 效 。 
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在 后 期 视觉 验收 的 时 候 ， 我 们 可 以 换 位 思考 ， 把 自己 当 作 开 发 者 ， 站 在 他 们 的 角度 去 思考 
什么 样 的 验收 方式 会 更 方便 修改 。 例 如 设计 之 前 就 针对 分 割 线 、 小 屏幕 适 配 等 问题 想 好 解 
决 方案 ， 并 同步 到 开发 者 ; 在 一 轮 验收 时 把 修改 意见 标注 清楚 ， 整 理 成 验收 文档 。 


前 期 多 花费 一 点 时 间 ， 能 有 效 帮 助 开发 者 提高 工作 效率 ， 反 过 来 也 能 为 自己 减少 二 次 验收 
的 时 间 成 本 。 
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05 ”组 件 的 理性 选择 


文 / 付 铂 再 


在 设计 界面 时 ， 同 样 的 功能 可 以 用 不 同 的 样式 展示 ， 我 们 需要 知道 如 何 利用 用 户 的 使 用 场 
景 来 选择 最 合适 的 设计 样式 。 


警告 框 与 操作 表 


1. 定义 


1 ) 警告 框 

警告 框 是 一 种 操作 上 的 确认 ， 只 有 当 用 户 点 击 按钮 后 才 算 真正 完成 ， 才 可 以 有 其 他 操作 。 
它 的 主要 作用 是 警告 或 提示 用 户 ， 由 三 部 分 组 成 : 标题 、 正 文 、 按 钮 。 有些 简单 的 警告 或 
提示 只 有 正文 和 按钮 即 可 ， 如 下 图 所 示 : 


弹 窗 标题 
内 容 区 域 ， 具 体 描述 用 户 需要 做 
ee 具体 描述 用 户 需 要 做 什么 样 的 什么 样 的 选择 


按钮 按钮 按钮 


2 ) 操作 表 

操作 表 是 从 屏幕 底部 边缘 向 上 滑 出 的 一 个 面板 ， 可 提供 2 个 以 上 的 选择 。 它 呈现 给 用 户 的 
是 简单 、 清 晰 、 无 须 解释 的 一 组 操作 ， 没 有 描述 内 容 ( 大 部 分 ) 。 另 外 ， 重 要 的 功能 操作 
也 会 用 红色 文字 展示 ， 如 下 图 所 示 : 
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重要 的 按钮 


按钮 技 钮 
按钮 按钮 
取消 取消 


2. 如 何 选用 


1 ) 文字 内 容重 要 性 


选择 警示 框 和 操作 表 时 ， 要 考虑 的 是 弹 窗 文字 内 容 对 于 用 户 的 重要 程度 。 如 果 内 容 极为 重 
要 则 选用 警示 框 ， 如 果 内 容 不 重要 甚至 不 需要 描述 ， 就 应 该 选择 操作 表 ， 如 下 图 所 示 : 


9 者 渴 后 沿 可 信和 
彻底 删除 


淘宝 QQ 邮箱 


淘宝 登录 密码 错误 时 ， 由 于 警示 框 可 以 更 突出 地 体现 文字 内 容 ， 帮 助 用 户 找 到 问题 所 在 ， 
所 以 选用 警示 框 。 再 看 QQ 邮箱 的 垃圾 箱 ， 点 击 全 部 清空 时 ， 由 于 信息 本 身 就 在 垃圾 箱 
内 ， 不 需要 对 用 户 进行 过 多 文字 提示 ， 用 户 直 接 操作 即 可 ， 所 以 最 后 选用 操作 表 。 


2 ) 用 户 操 作 流畅 性 

当 我 们 需要 让 用 户 停止 操作 并 必须 点 击 当前 界面 的 按钮 时 ， 选 择 警 示 框 。 警 示 框 对 用 户 操 
作 上 的 流畅 性 有 着 很 严重 的 影响 ， 如 果 提 示 不 需要 太 过 强硬 ， 我 们 就 选用 在 屏幕 中 任意 位 
置 点 击 就 会 消失 的 操作 表 ， 如 下 图 所 示 : 
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你 


为 了 全 风 您 正 富安 全 的 使 用 卫 于 已 书 理 
务 ， 青 各 开 我 们 里 取 人 的 相机 相关 本 胃 


阿里 巴巴 支付 宝 


阿里 巴巴 拍照 功能 中 ， 为 了 避免 用 户 有 其 他 操作 而 影响 当前 需要 解决 的 问题 ， 会 使 用 警示 
框 来 阻止 用 户 。 而 在 支付 宝 中 ， 点 击 退 出 登录 时 ， 为 了 避免 用 户 误 操 作 而 退出 ， 则 使 用 了 
操作 表 ， 用 户 可 以 通过 点 击 空白 区 域 关闭 操作 表 。 


3 ) 按钮 数量 

这 是 最 容易 区 分 样式 的 因素 ， 当 弹 窗 中 的 按钮 数量 超过 2 个 时 ， 我 们 一 定 选用 操作 表 ， 
为 警示 框 的 按钮 数量 不 可 以 超过 2 个 。 如 果 数 量 一 样 ， 可 以 根据 上 面 两 点 择优 使 用 ， 如 下 
图 所 示 : 


阿里 巴巴 花瓣 
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在 得 到 App 中 点 击 开通 “推送 通知 ”时 ， 因 为 操作 按钮 只 有 一 个 ， 所 以 选择 警示 框 。 而 点 
击 微 博 中 的 “更 多 ”按钮 ， 用 的 则 是 操作 表 ， 因 为 操作 按钮 有 三 个 。 


标签 栏 与 工具 栏 


1. 定义 


1 ) 标签 栏 
标签 栏 位 于 屏幕 底部 ， 它 是 悬浮 在 当前 页 面 之 上 的 ， 并 且 会 一 直 存 在 ， 只 有 当 用 户 点 击 跳 
转 到 二 级 菜单 后 才 会 消失 ， 如 下 图 所 示 : 


图 标 图 标 


用 户 可 以 在 不 同 的 子 任务 、 视 图 和 模式 中 进行 切换 ， 并 且 切 换 按钮 间 都 属于 不 同 的 内 容 。 
当 用 户 选中 某 个 标签 时 ， 该 标签 呈现 适当 的 高 亮 状态 。 标 签 的 数量 也 有 限制 ， 不 能 超过 5 
个 ， 如 果 存 在 5 个 以 上 的 标签 ， 可 以 将 最 后 一 个 标签 设计 成 “更 多 ”标签 。 


2) 工具 栏 
工具 栏 同 样 位 于 屏幕 底部 ， 悬 浮 在 当前 页 面 之 上 ， 只 是 当 用 户 不 需要 使 用 的 时 候 ， 可 以 隐 
藏 它 。 例 如 向 上 滑动 界面 时 ， 工 具 栏 会 自动 隐藏 。 工 具 栏 的 内 容 主要 是 与 当前 页 面相 关 的 
操作 按钮 。 
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2. 如 何 选 用 


1 ) 切换 状态 
当 我 们 需要 同 级 别 界面 切换 时 ， 应 该 选择 标签 栏 ， 同 时 标签 栏 的 切换 通常 为 一 级 导航 。 工 
具 栏 的 功能 仅 针对 当前 界面 内 容 的 相关 操作 ， 如 下 图 所 示 : 


ee 由 外 局 


es 


微 信 读 书 -标签 栏 Safari- 工 具 栏 


微 信 读 书 底部 栏 是 关于 同 级 别 的 界面 切换 ， 所 以 选择 标签 栏 ， 同 时 标签 栏 也 是 该 产品 
的 一 级 导航 。 而 Safari 浏 览 器 底部 的 内 容 是 针对 当前 界面 的 操作 功能 ， 所 以 使 用 了 工 
具 栏 。 
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2 ) 位 置 状态 

当 底部 导航 始终 在 界面 最 上 方 ， 上 下 滑动 都 不 会 消失 ， 则 选择 标签 栏 ; 如 果 底 部 导航 
上 滑 随 之 消失 则 选择 工具 栏 ( 也 有 少数 的 工具 栏 是 怎么 滑动 都 不 会 消失 的 ) ， 如 下 图 
所 示 : 


0000 中 国 移动 全 3。 下午 8:05 1D ee ee Md 
四 回 | | 


iPhone11 将 于 下 月 10 日 发 布 ， 两 大 杀手 钢 
了 曝光， 无 闲 价格 感人 ! 


AM 本 国 


马 王 堆 出 土 的 两 件 "神秘 "东西 ， 至 今 都 难 
得 ， 专 家 : 辛 追 真 奢侈 


小 视频 | 《沙漠 骆驼 》 走 了 ，《 狂 浪 》 
来 了 ， 热 情 奔 放 的 曲调 ， 太 酷 了 ! 


王者 荣耀 : 7 小 时 后 的 主宰 是 什么 样 游戏 


实测 告诉 你 ， 结 局 真 笑 了 


百度 App- 标 签 栏 Safari 百度 -工具 栏 


在 百度 的 App 中 ， 当 向 上 滑动 界面 时 ， 底 部 导航 的 位 置 是 不 会 消失 的 ， 所 以 使 用 了 标签 
栏 。 再 看 Safari 浏 览 器 ， 因 为 上 滑 时 底部 栏 会 被 隐藏 ， 所 以 选用 了 工具 栏 。 


3 ) 选中 状态 


当 用 户 选 中 底部 某 一 项 时 ， 如 果 需 要 高 亮 显 示 ， 且 显示 的 内 容 是 不 同 子 任务 的 视图 ， 则 使 
用 标签 栏 ; 而 当选 择 后 ， 出 现 操作 表 等 与 当前 界面 相关 的 操作 时 ， 应 该 选择 工具 栏 ， 如 下 
图 所 示 : 
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oo 中 国 移动 全 F498:07 1 
推荐 ”搞笑 ”小 视频 影视 直播 音乐 # 


册 音乐 及 刚 志 加 竹 Dz2 全 日 


吉林 省 最 值得 期 待 的 城市 : 实力 仅 次 于 
m 用 


3 


百度 App- 标 签 栏 Safari 浏览 器 -工具 栏 


在 百度 App 中 ， 当 点 击 底部 的 选项 时 ， 切 换 界面 的 同时 当前 选中 的 “好 看 视频 ”需要 变 
成 选中 的 样式 ， 来 告知 用 户 当前 选中 的 是 哪个 界面 ， 所 以 使 用 了 标签 栏 。 再 看 Safari 浏 览 
器 ， 点 击 底部 按钮 后 出 现 操作 表 ， 且 当前 选中 的 按钮 也 不 会 变 高 亮 ， 也 不 会 切换 当前 界 
面 ， 所 以 选择 了 工具 栏 。 


Tabs 与 分 段 控件 


1. 定义 


1) Tabs 

Tabs 来 自 MD 规 范 ， 早 在 Android 2.0 时 代 ， 官 方 的 通讯 录 App 就 使 用 顶部 Tabs 导 
航 ， 可 以 滑动 切换 不 同 视图 。Tabs 里 的 Tab 呈 现 的 内 容 可 以 有 很 大 的 差别 ， 而 且 数 量 没 
有 限制 ， 其 不 能 作为 表单 的 单 选 组 件 。 
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Tab1 Tab1 


2 ) 分 段 控件 


分 段 控件 是 iOS 原 生 控 件 之 一 ， 每 个 分 段 作 用 是 互 斥 的 。 在 分 段 控件 里 ， 所 有 的 分 段 选项 
框 在 长 度 上 要 保持 一 致 ，iOS 规 范 中 规定 对 于 分 段 控件 的 分 段 选 项 不 得 超过 5 个 ， 每 个 分 
段 选项 可 以 是 文字 或 者 图 片 。 


2. 如 何 运用 


1 ) 来 源 不 同 
分 段 控件 来 自 jOS 规 范 ， 而 Tabs 来 源 于 MD 规范 ， 如 下 图 所 示 : 


网 易 云 音乐 IOS 网 易 云 音乐 Android 


我 们 来 看 网 易 云 音乐 “我 的 消息 ”界面 ，iPhone 中 因为 是 iOS 系 统 配 置 的 应 用 ， 所 以 界面 
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中 切换 样式 用 的 是 分 段 控件 ， 而 反观 安 卓 系统 则 用 的 是 Tabs 切 换 。 


2 ) 内 容 不 同 

分 段 控件 主要 起 到 分 割 和 筛选 同类 数据 的 作用 ， 而 Tabs 则 没有 这 样 的 限制 ，Tabs 栏 里 的 
每 一 项 所 呈现 的 内 容 可 以 有 很 大 的 差别 。 另 外 ， 分 段 控 件 更 多 是 以 单 选 功 能 出 现在 表单 的 
使 用 中 ， 而 Tab 则 不 能 作为 表单 的 单 选 组 件 ， 如 下 图 所 示 : 


关注 推荐 快讯 视频 科技 生活 三 


做 鱼 记 账 36 和 氢 


效 鱼 记 账 的 图 表 页 中 ， 支 出 、 收 入 为 整个 界面 的 展示 项 目 ， 为 了 让 用 户 查 看 起 来 更 加 方 
便 ， 把 数据 分 割 为 周 、 月 、 年 的 不 同 数据 展示 ， 因 为 是 同类 数据 切换 ， 所 以 选择 了 分 
段 控 件 。 反 观 36 氮 首页 的 Tabs 栏 ， 每 一 项 内 容 的 差别 都 很 大 。 


3 ) 操作 方式 不 同 
分 段 控 件 需要 点 击 操作 ， 而 Tabs 除 了 点 击 外 还 可 以 通过 左右 滑动 切换 不 同 视图 ， 如 下 图 
所 示 : 


第 2 章 ”能 力 效率 提升 159 


京东 金融 小 红 书 


京东 金融 App 某 产品 近 七 日 年 化 的 表单 是 极为 近似 的 趋势 图 ， 不 易 让 用 户 侧 滑 屏 幕 切换 ， 
需要 让 用 户 更 精准 地 点 击 选 择 ， 所 以 使 用 了 只 能 点 击 的 分 段 控 件 。 而 小 红 书 的 切换 页 变化 
都 比较 明显 ， 很 容易 区 分 ， 所 以 选择 了 可 以 侧 滑 屏 幕 切换 的 Tabs 。 


4 ) 数量 

分 段 控件 数量 不 能 超过 5 个 ， 而 Tabs 没 有 数量 限制 。 例 如 ， 网 易 云 音 乐 中 的 消息 界面 因为 
分 类 的 数量 未 超过 五 个 ( 不 是 所 有 未 超过 五 个 的 就 要 用 分 段 控件 ， 同 时 也 要 根据 以 上 说 的 
其 他 三 种 情况 判断 ， 这 里 只 针对 数量 阐述 而 已 ) ， 所 以 可 以 使 用 分 段 控件 ; 而 网 易 云 音乐 
视频 界面 中 因为 分 类 数量 过 多 且 内 容 上 有 区 别 ， 所 以 选择 了 Tabs 。 


昔 依 林 《特务 J)》 现场 版 ， 妖 男 伴舞 太 抢 戏 ! 
ms 0” EB" © 
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Toast 与 Snackbar 


1. 定义 


1) Toast 
Toast 通 常 出 现在 顶部 和 中 部 ， 浮 于 页 面 上 方 ， 无 法 对 其 操作 ， 出 现 一 段 时 间 后 便 会 消 
失 ， 并 且 在 此 期 间 不 影响 其 他 正常 操作 ， 如 下 图 所 示 : 


:4 
已 更 新 成 功 


2) Snackbar 

Snackbar 出 自 安 卓 系统 ， 是 安 卓 系统 的 特色 弹 窗 之 一 。 根 据 官方 定义 它 是 不 存在 图 片 
的 ， 但 随 着 产品 功能 的 不 断 优化 ， 现 在 产品 中 也 存在 带 有 图 片 的 Snackbar。 它 是 由 一 段 
信息 和 一 个 按钮 组 成 ， 它 们 会 在 超时 或 者 用 户 触 磁 屏幕 其 他 地 方 后 自动 消失 。Snackbar 
也 可 以 在 屏幕 上 滑动 关闭 ， 不 会 妨碍 用 户 对 产品 的 其 他 操作 ， 如 下 图 所 示 : 


2. 如 何 选用 


1 ) 操作 不 同 
Toast 弹 窗 没有 任何 操作 键 ， 而 Snackbar 是 有 操作 键 的 ， 如 下 图 所 示 : 
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CD Fate 10 EE FF Tm 


< 
〈 Bs gn. 


岛 251| 踊 蜂 首 游记 . 


十 二 月 ， 圣 诈 去 北极 做 一 个 
追 光 者 【丹麦 芬兰 瑞典 挪威 
北 风 4 国 圣诞 者 人 村 极 


Pb 日 mm 安 u 


马蜂 窜 小 红 书 


马蜂 高 App 中 的 文章 点 赞 功能 只 需要 告知 用 户 点 赞 已 成 功 即 可 ， 不 需要 其 他 操作 ， 所 以 选 
用 Toast 弹 窗 ; 而 小 红 书 中 当 进 入 发 现 界面 点 击 收藏 时 ， 会 出 现 引导 用 户 到 专辑 分 类 中 去 
的 浮 层 。 


2 ) 消失 状态 不 同 
Toast 弹 窗 完全 是 通过 超时 后 自动 消失 ， 不 存在 任何 操作 ; 而 Snackbar 可 以 超时 消失 也 
可 以 让 用 户主 动 上 滑 关 闭 ， 如 下 图 所 示 : 


穷人 到 层 能 不 能 富 徘 出 气质 不 LOW 的 高 中 孩 
子 ? 


人 用 是 生生 gj 作 慑 oO 


丙 吉 感人 群 


写 给 内 向 高 敏感 人 群 一 提升 能 量 的 三 个 方 
法 


© 


豆瓣 小 红 书 
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豆 状 App 广播 界面 中 ， 当 点 击 刷新 后 ， 更 新 的 内 容 会 自动 出 现在 最 前 面 ， 用 户 不 需要 任 
何 操作 就 可 以 看 到 内 容 ， 所 以 选用 无 操作 必须 等 待 超时 后 才 会 消失 的 Toast 弹 窗 。 而 携程 
App 中 的 酒店 界面 ， 因 为 更 多 精彩 的 内 容 在 下 面 ， 并 没有 展示 出 来 ， 为 了 不 让 用 户 在 滑动 
浏览 时 造成 视觉 障碍 ， 所 以 选择 了 Snackbar， 除 了 超时 后 自动 关闭 外 ， 也 可 以 通过 滑动 
界面 让 弹 窗 主 动 关闭 。 


3 ) 组 成 元 素 不 同 


Toast 弹 窗 主要 是 由 文字 和 背景 组 成 ， 也 可 以 额外 附加 图 标 。 而 Snackbar 除 文字 、 背 
景 、 图 标 外 还 有 操作 键 ， 如 下 图 所 示 : 


Ce 国 时 动 下 80 TO 


设置 
帐号 / 绑 定 设置 
推送 消息 设置 
播放 音质 选择 
使 用 听 简 播放 春 Vv 

已 清除 十 存 

给 软件 打分 
清除 组 存 


关于 我 们 


地 出 登 争 


得 到 小 红 书 


得 到 App 中 只 需要 提示 即 可 ， 所 以 选用 Toast， 组 成 元 素 为 背景 、 文 字 、 图 标 ， 而 小 红 书 
App 需 要 加 入 操作 键 ， 所 以 选择 了 Snackbar。 


画 重 点 


( 1 ) 警告 栏 与 操作 表 : 警告 栏 是 一 种 操作 上 的 确认 ， 只 有 当 用 户 点 击 按钮 后 才 算 真 的 完 
成 ， 才 可 以 有 其 他 操作 。 主 要 作用 是 警告 或 提示 用 户 。 而 操作 表 是 常会 从 屏幕 底部 边缘 向 
上 滑 出 的 一 个 面板 ， 可 提供 2 个 以 上 的 选择 。 
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( 2 ) 标签 栏 与 工具 栏 : 标签 栏 位 于 屏幕 底部 ， 悬 浮 在 当前 页 面 之 上 ， 并 且 会 一 直 存 在 ， 
只 有 当 用 户 点 击 跳 转 到 二 级 菜单 后 才 会 消失 。 而 工具 栏 同样 位 于 屏幕 底部 ， 悬 浮 在 当前 页 
面 之 上 ， 当 用 户 不 需要 使 用 的 时 候 ， 可 以 隐藏 。 


( 3) Tabs 来 自 MD 规 范 ， 早 在 Android 2.0 时 代 ， 官 方 的 通讯 录 App 就 使 用 顶部 Tabs 
导航 ， 可 以 滑动 切换 不 同 视图 。 而 分 段 控件 是 iOS 原 生 控件 之 一 ， 每 个 分 段 作用 是 互 斥 
的 ， 在 分 段 控件 里 ， 所 有 的 分 段 选 项 框 在 长 度 上 要 保持 一 致 ， 选 项 不 得 超过 5 个 ， 可 以 是 
文字 或 者 图 片 。 


( 4 ) Toast 通 常 出 现在 顶部 和 中 部 ， 浮 于 页 面 上 方 ， 无 法 对 其 操作 ， 出 现 一 段 时 间 后 便 会 
消失 ， 并 且 在 此 期 间 不 影响 其 他 正常 操作 。 而 Snackbar 出 自 安 卓 系统 ， 是 安 卓 系统 的 特 
色 弹 窗 之 一 ， 它 是 由 一 段 信息 和 一 个 按钮 组 成 ， 它 们 会 在 超时 或 者 用 户 在 屏幕 其 他 地 方 触 
碰 后 自动 消失 。Snackbar 可 以 在 屏幕 上 滑动 关闭 。 


往往 看 似 相 同 的 组 件 ， 其 使 用 场景 是 干 差 万 别 的 。 每 个 组 件 都 有 不 可 替代 的 作用 。 


参考 资料 
iOS 和 Android 规 范 解析 一 一 标签 导航 和 分 段 控件 http://t.cn/Efi6F7h 


正确 使 用 控件 -警告 框 ”http:/t.cm/EfiXazl 

iOS 9 人 机 界面 指南 (四 )UlI 元 素 http://t.cn/RGIIkVF 

App 设 计 中 ，6 组 常见 组 件 的 区 别 与 用 法 “http://t.cn/RTia2tu 

这 个 控件 叫 : Segment Control/ 分 段 控 件 ( 附录 与 Tabs 的 区 别 ) http://t.cn/Efii1PR 


警告 框 和 操作 表 ( Action Sheet) http://t.cn/EfiaMfC 
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06 倾 囊 相 授 Sketch 使 用 的 小 
技巧 


现在 越 来 越 多 的 人 选择 用 Sketch 来 做 Ul 界 面 ， 它 相 比 PS 来 说 ， 功 能 更 高 效 ， 可 以 说 是 
“ 专 为 界面 设计 而 生 ”。 如 果 把 做 界面 比 作 前 苹果 ， 那 么 PS 是 一 把 件 头 ，Sketch 则 是 水 
果 刀 ， 芽 头 能 做 很 多 事情 ， 但 是 对 于 削 苹 果 这 件 事情 来 说 ， 却 很 麻烦 ， 不 如 水 果 刀 好 用 。 


而 且 Sketch 学 习 成 本 很 低 ， 基 本 一 两 天 就 能 上 手 ， 加 上 它 非常 开放 ， 支 持 第 三 方 插件 ， 这 
就 催生 了 很 多 各 式 各 样 的 插件 ， 方 便 设 计 师 使 用 ， 提 高 了 设计 师 的 工作 效率 。 下 面 从 两 个 
方面 介绍 一 些 工 作 中 会 用 到 的 Sketch 小 技巧 : 


(1 ) 软件 自 带 功能 : 


新 建 画 板 、 加 减 乘除 、 不 透明 度 、 快 速 查看 间距 、 移 动 微 调 、 图 层 重 命名 、 打 组 / 解 组 、 快 
速 选择 、 智 能 选择 、 旋 转 复制 、 画 板 自 适应 、 画 板 折 垣 、 设 置 快捷 键 、 文 本 样式 、 图 层 样 
式 、 图 片 导出 、Symbols。 


(2 ) 第 三 方 插件 : 


Sketch measure、Font-Packer-master。 
软件 自 带 功能 


很 多 人 只 知道 Sketch 有 很 多 插件 ， 却 不 知道 它 有 很 多 自 带 的 功能 也 非常 好 用 ， 不 亚 于 那些 
插件 。 


1. 新 建 画板 


当 你 刚 打开 软件 的 时 候 ， 想 要 新 建 一 个 画板 ， 可 以 按 字母 A， 鼠 标 指针 就 会 变 成 一 个 
“+” 号 ， 可 以 自己 随意 框 选 画板 的 尺寸 ; 也 可 以 直接 用 界面 右 侧 提供 的 常用 设备 的 尺 
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寸 , 如 iPhone 8、iPhone XS 等 。 


Apple Devices := MdrodDevices + = 
‘PHONE COMMON MOBRE 
prones 375x657 国 Ardoi 360x640 
phonea ps ser73e 目 wz wa 
目 wowse 320r568 目 max aeou7zzo 
iphonexs Sei 目 cuvse 两 
国 Phonexnr aax896 coMwon TALET 
国 ve 0 
国 weoexswe aoe 
国 Newss 768x1024 
?oanioza 目 von ee 
1024x1366 Wi 
时 pu 


不 过 直接 在 右 侧 选择 预 设 的 尺寸 时 ， 画 板 的 位 置 是 固定 的 ， 没 办 法 把 画板 新 建 到 指定 的 地 
方 。 这 个 时 候 我 们 可 以 用 鼠标 直接 框 选 画 板 ， 然 后 再 在 右 侧 调整 画板 大 小 。 


2. 加 减 乘除 


做 界面 的 时 候 经 常会 出 现 这 样 的 情况 : 要 把 一 个 图 形 三 等 分 、 四 等 分 ， 或 者 说 加 上 30px、 
40px， 这 时 候 如 果 手 动 去 计算 ， 然 后 再 输入 ， 很 浪费 时 间 成 本 ， 而 且 对 于 数学 不 好 的 人 来 
说 ， 还 容易 算 错 。 


其 实 Sketch 就 自 带 一 些 快捷 方法 ， 在 右 侧 尺 寸 大 小 的 面板 处 ， 可 以 直接 在 尺寸 后 输入 
“+”“-” “*” “/”， 后 面 跟 上 数字 ， 输 完 之 后 确定 ， 就 可 以 得 到 想 要 的 计算 结果 了 。 


-36750 X 33818 TY 0 -36750 x 33818 Y 0 志 
(eo0rzaw]s 200 » [AS [eews walz0 + (als 
加 减 乘除 


3. 不 透明 度 


当 要 改变 一 个 元 素 的 不 透明 度 时 ， 可 以 直接 按 数字 键 来 调整 。 例 如 ， 你 想 把 不 透明 度 改 到 
65%， 那 么 选中 这 个 元 素 后 ， 直 接 按 数 字 65; 当 不 透明 度 是 整数 的 时 候 ， 只 需要 直接 输 
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入 数字 6， 就 可 以 将 不 透明 度 调整 到 60%。 


4. 快速 查看 间距 


都 说 做 UI 是 在 跟 像 素 打交道 ， 界 面 中 各 个 地 方 的 参数 大 小 都 不 能 有 误差 。 有 时 候 我 们 
就 需要 快速 查看 两 个 元 素 之 间 的 间距 大 小 ， 看 看 是 不 是 统一 。 选 择 其 中 一 个 元 素 ， 按 住 
Option 不 放 ， 鼠 标 指针 移 到 另 一 个 元 素 上 ， 就 可 以 看 到 两 者 之 间 的 间距 了 。 


Step 1. 选中 一 个 元 素 
Step 2. 按 住 Option 不 放 
Step 3. 鼠标 指针 移 到 另 一 个 元 素 上 


5. 移动 微调 

大 多 数 人 只 知道 按 住 Shift 不 放 ， 选 择 “ 上 ”“ 下 ”“ 左 ”“ 右 ”可 以 向 各 个 方向 快速 移 
动 10px， 但 其 实 10px 这 个 是 可 以 更 改 的 。 对 于 移动 端 来 说 ， 普 遍 都 会 把 参数 设 成 8 的 
倍数 ， 那 么 微 移 10px 来 说 显然 不 是 那么 合适 ， 微 移 完 了 之 后 还 得 再 调整 一 下 。 可 以 选 
择 Sketch-Preferences-Canvas， 把 移动 对 象 的 数值 由 10px 改 成 8px， 或 者 任意 你 想 
要 的 参数 。 


. otorencon 
J ee 二 凶 
About & Registration... bi 


4 
Hide Sketch %H 
Hide Others TRH 
Show Al 
Quit Sketch %Q 
移动 微调 
6. 图 层 重 命 


双击 图 层 或 者 按 住 快 捷 键 Command+R， 可 以 为 图 层 重 命名 。 


7. 打 组 / 解 组 
按 下 快捷 键 Command+G/Command Shift +G， 可 实现 打 组 / 解 组 。 
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8. 快速 选择 


当 我 们 把 很 多 元 素 都 打 组 之 后 ， 想 要 快速 选择 组 内 的 元 素 时 ， 常 用 的 方法 是 双击 元 素 ， 但 
如 果 组 该 套 得 特别 多 的 话 ， 就 很 难 选中 了 。 这 个 时 候 可 以 用 快捷 键 帮助 我 们 快速 选择 : 按 
住 Command 不 放 ， 同 时 单 击 该 元 素 。 


9. 智能 选择 

当 很 多 元 素 混在 一 起 的 时 候 ， 如 果 只 想 选 中 其 中 的 几 个 ， 一 下 子 框 选 会 很 容易 选 到 不 想 选 
中 的 ， 这 时 候 智 能 选择 就 派 上 用 场 了 ， 按 住 Option 不 放 ， 同 时 用 鼠标 框 选 元 素 ， 最 终 只 
有 全 部 被 框 选 的 元 素 才 会 被 选中 。 


10. 旋转 复制 


记得 刚 开 始 用 Sketch 的 时 候 ， 一 直 都 不 知道 怎么 旋转 复制 ， 都 是 在 Ai 里 做 好 导入 进来 ， 后 
来 才 发 现 Sketch 是 有 这 个 功能 的 。 


== I 
CES 
| 区 多 一 .一 器 -一 一- >» - 
i 2 
旋转 复制 
11. 画板 自 适 应 


设计 稿 的 尺寸 超过 一 屏 的 时 候 ， 它 的 高 度 是 根据 内 容 变 化 的 ， 没 有 一 个 固定 值 ， 所 以 
做 的 时 候 一 般 都 是 先 把 元 素 排 好 ， 然 后 再 手动 调整 画板 的 大 小 。 但 很 多 时 候 容易 出 现 
几 像 素 的 误差 ， 这 时 候 就 可 以 用 软件 自 带 的 功能 来 调整 尺寸 大 小 : Layer-Artboard- 
Resize to Fit Content。 其 实 可 以 把 常用 的 功能 设置 成 快捷 键 ， 后 面 会 具体 说 到 。 


12. 画板 折 双 
想 要 折 功 左 侧 画 板 的 时 候 ， 可 以 选择 View-Layer List-Collapse All Groups。 


13. 设置 快捷 键 


Sketch 里 有 些 自 带 的 功能 有 快捷 键 ， 但 是 很 多 常用 的 功能 却 没 有 ， 例 如 上 面 说 到 的 画板 
自 适 应 、 画 板 折 赤 ， 我 们 可 以 自己 设置 : 系统 偏好 设置 -键盘 -快捷 键 -添加 -选择 应 用 程 
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序 、 输 入 菜单 标题 、 设 置 键盘 快捷 键 -添加 。 这 里 所 写 的 菜单 标题 对 应 Sketch 里 的 功能 命 
名 ， 必 须要 完全 一 样 ， 这 样 设置 的 快捷 键 才 会 生效 。 


14. 文本 样式 

这 个 就 相当 于 一 个 全 局 统一 的 样式 ， 仅 针对 字体 。 当 我 们 定义 好 产品 内 所 用 的 字号 ( 例如 
一 级 标题 、 二 级 标题 、 正 文 的 字号 ) 之 后 ， 就 可 以 把 它 做 成 文本 样式 ， 后 续 其 他 页 面 需要 
用 到 时 直接 调用 即 可 。 这 样 可 以 防止 其 他 页 面 的 参数 出 错 ， 和 之 前 的 不 统一 。 


了 本 入学 及 所 周 > 直入 所 学 及 所 司 过 
一 
新 建文 本 样式 重 命名 文本 样式 


当 要 修改 的 时 候 ， 可 以 只 修改 一 处 ， 单 击 刷新 ， 就 可 以 同步 修改 所 有 用 到 这 个 样式 的 


字体 。 
泥 盐 社 所 学 及 所 思 油 盐 社 所 学 及 所 是 二 二 一 
相 子 的 查 子 > 相 子 的 棚子 = 
ES] 
修改 文本 样式 批量 同步 文本 样式 
15. 图 层 样式 


这 个 和 文本 样式 是 一 样 的 ， 不 过 它 针对 的 是 图 层 。 
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16. 图 片 导出 

当 我 们 用 2 倍率 作 图 的 时 候 ， 最 后 导出 切 图 会 发 现 切 图 的 后 缀 名 不 对 ， 导 出 1 倍率 才 是 实际 
的 2 倍率 图 ， 导 出 1.5 倍 率 才 是 实际 的 3 倍率 图 ， 但 是 它 的 后 缀 却 是 @1x、@2x， 容 易 让 人 
误解 。 这 个 时 候 ， 只 需要 做 一 点 小 小 的 改变 就 可 以 避免 这 个 情况 了 。 


在 软件 界面 的 右 下 角 选 择 Edit Presets ( 编辑 预 设 ) ， 把 默认 里 的 导出 参数 的 后 缀 名 改 一 
下 ，1 售 率 图 的 后 缀 名 改 成 @2x，1.5 倍 率 图 的 后 缀 名 改 成 @3x。 


8 出 得 Z 十 os 
5x | @lsx ~ PNG x > 让 汪汪 > 
导出 Btmap. 由 CO 
图 片 导出 
17. Symbols 


众所周知 ，Sketch 最 高 效 的 功能 就 是 组 件 化 界面 中 所 使 用 的 元 素 ， 设 计 师 可 以 把 同一 个 界 
面 出 现 的 相同 内 容 都 做 成 组 件 ， 方 便 后 期 直接 调用 ( 自 带 功能 ， 不 是 插件 ) 。 


下 面 以 App 底部 标签 栏 为 例 ， 详 细 说 明 下 Symbols 的 用 法 : 


首先 ， 把 红 框 处 每 一 个 内 容 都 单独 做 成 组 件 ( 选中 元 素 ， 创 建 组 件 即 可 ) 。 


日 @a a 
画 到 可 了 苔 
4 

会 
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再 把 整个 标签 栏 做 成 Symbols ， 当 后 期 需要 改变 状态 时 ， 只 需要 在 右边 更 换 即 可 。 


:eo 


不 过 需要 注意 的 是 ， 元 素 想 要 切换 成 其 他 元 素 时 ， 必 须 保 证 这 两 个 元 素 的 大 小 完全 一 


致 ， 其 次 ， 修 改 文字 时 ， 也 要 考虑 文字 显示 的 宽度 ， 需 要 把 默认 显示 范围 设置 成 最 大 显 
示范 围 。 
首页 首页 
文字 默认 显示 范围 文字 最 大 显示 范围 
© © 
第 三 方 插件 


1. Sketch measure 


1 ) 字体 

Sketch measure 是 非常 好 用 的 一 款 切 图 标注 插件 。 很 多 人 在 标注 字体 的 时 候 ， 可 能 会 出 
现 这 种 情况 : 文字 密密麻麻 的 ， 所 有 的 参数 都 出 现 了 ， 但 其 实 仔细 看 会 发 现 很 多 参数 都 不 
需要 ， 还 占 地 方 。 


海盐 社 : 所 写 即 所 思 


刚 开始 遇 到 这 种 情况 ， 我 都 是 手动 把 不 需要 的 删除 ， 直 到 后 来 才 发 现 有 快捷 键 。 我 们 只 需 
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要 在 标注 的 时 候 按 住 Alt 键 ， 再 单 击 标注 ( 红 框 处 ) 就 会 出 现 调整 参数 的 界面 ， 可 以 选择 需 


要 标注 的 种 类 ， 以 及 标注 信息 所 显示 的 方位 。 


2 ) 自动 导出 


如 果 每 个 页 面 都 手动 标注 的 话 ， 人 力 成 本 太 大 ， 所 以 可 以 用 自动 导出 与 手动 标注 相 结合 


扎 口 日 : 


方式 ， 把 重要 的 、 容 易 忽 略 的 信息 手动 标注 一 下 ( 如 小 屏幕 怎么 适 配 等 ) 那些 重复 性 的 工 


作 都 可 以 交 给 自动 导出 。 
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2. Font-Packer-master 


工作 中 经 常会 遇 到 这 种 情况 : 当 你 把 文件 发 给 其 他 人 的 时 候 ， 对 方 收 到 后 弹出 各 种 没有 字 
体 的 提示 ， 然 后 软件 还 会 自动 替换 成 其 他 的 字体 。 而 现在 有 了 Font-Packer-master 揪 件 
就 能 避免 这 个 问题 了 ， 我 们 可 以 把 页 面 所 用 的 字体 一 起 打包 发 给 其 他 人 。 


LL 是 示 窗口 帮 动 ene BM ee 


[=| Je- . 
Si 四 
Base 
wa me 
A sway 
a 
Bm 
Om 
own coe 
am 

mm 

mm 
se 
a 

on. mw 

| EES e; 


Wem Ag 证 Ag Ag A 


oa Re re orem re ee eee 
Ce 


画 重 点 


以 上 就 是 我 在 用 Sketch 时 总 结 的 一 些小 技巧 。 最 后 我 想 要 说 明 的 一 点 是 ， 虽 然 Sketch 的 
插件 很 多 ， 琳 琅 满目 ， 但 是 我 们 要 学 会 从 中 找到 适合 自己 的 ， 在 不 影响 最 终 界 面 效 果 的 前 
提 下 ， 提 高 工作 效率 。 当 一 个 插件 对 界面 效果 以 及 工作 效率 没有 太 大 帮助 的 时 候 ， 那 它 就 
并 不 适合 自己 。 


说 一 句 老生 常 谈 的 话 : 要 想 做 出 好 作品 ， 关 键 不 在 于 工具 ， 而 在 于 想法 。 
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07 那些 你 不 知道 的 好 用 软件 


文 / 吴 荫 


选择 对 了 工具 ， 就 成 功 了 一 半 。 可 是 很 多 人 并 没有 意识 到 这 一 点 ， 还 是 习惯 于 用 自己 最 顺 


手 的 工具 ， 不 愿意 去 改变 。 换 个 角度 想 想 ， 互 联网 发 展 得 这 么 快 ， 很 多 跟 不 上 时 代 发 


展 的 


东西 都 会 被 淘汰 ， 在 没有 Sketch 之 前 ， 大 家 用 PS 做 Ul; 有 了 Sketch 之 后 ， 工 作 效 率 提升 


很 多 。 既 然 迟早 都 会 改变 ， 那 为 什么 我 们 不 做 最 早 吃 螃 蟹 的 那 一 拨 人 呢 ? 
下 面 就 从 不 同方 面 来 分 别 介绍 一 些 好 用 的 软件 ， 这 些 都 是 实际 工作 中 会 常用 的 : 


@ 在 线 协 同一 一 石墨 文档 


@@ 图片 管理 一 一 Eagle 
@@ 。 云 存储 一 一 坚果 云 
@@ 高保 真 交 互 原型 一 一 Protopie 


@ 。 动 效 制作 及 输出 一 一 AE+Lottie 


在 线 协同 


石墨 文档 


石墨 文档 是 一 款 轻便 、 简 洁 的 在 线 协 作文 档 工 具 ，PC 端 和 移动 端 全 覆盖 ， 支 持 多 人 同时 
对 文档 编辑 和 评论 ， 让 你 与 他 人 轻松 完成 协作 摆 稿 、 方 案 讨论 、 会 议 记录 和 资料 共享 等 工 


作 。PC 端 支持 macOS 和 Windows 系 统 ， 移 动 端 支持 OS、Android 及 微 信 小 程序 。 


石墨 文档 可 以 把 自己 的 文件 分 享 给 其 他 人 ， 当 需要 协作 的 是 文件 夹 时 ， 没 有 分 享 功能 


只 
Ws 


能 为 当前 文件 夹 添加 协作 者 。 添 加 后 文件 夹 的 所 有 者 可 以 设置 他 人 的 权限 ， 协 作者 删除 文 
件 只 会 退出 文件 共享 ， 对 原文 件 没 有 任何 影响 。 后 续 文 件 夹 内 新 增 内 容 ， 也 会 直接 同步 给 


所 有 该 文件 的 协作 者 。 


174 UI 那些 事 儿 : 新 手 设计 师 的 成 长 之 路 


4 人 协作 


地 mpmzm we 退出 共享 
你 aa 
你 不 是 文档 的 创建 者 


上 mr -一 继续 此 操作 会 退出 文档 共享 
但 不 合 副 除 文档 
eon 


Ey 
ED | 


图 片 管理 一 一 Eagle 


Eagle 是 一 款 图 片 收集 软件 ， 相 当 于 本 地 的 花瓣 。 安 装 浏览 器 扩展 插件 后 ， 无 需 下 载 图 

， 只 需要 简单 地 下 拉 、 拖 钨 就 可 以 完成 图 片 的 收集 。 加 上 图 片 是 保存 在 本 地 ， 所 以 即使 
没有 网 络 的 时 候 也 能 查看 。 可 配合 坚果 云 使 用 ， 让 两 台 计 算 机 之 间 的 文件 实时 同步 。 支 持 
macOS 和 Windows 系统 。 


1. 导入 花 准 画 板 

该 工具 可 以 一 键 导入 花 准 里 的 图 片 。 不 过 需要 注意 的 是 ， 花 办 地 址 必须 写 单个 画板 的 地 
址 ， 不 然 会 显示 网 址 无 效 。 此 外 ， 不 只 是 可 以 导入 自己 的 单个 画板 ， 还 可 以 导入 别人 的 画 
板 。 要 是 看 到 哪个 花 六 有 用 户 的 图 片 特 别 好 ， 可 以 直接 将 其 导入 。 


E37 对 编辑 查找 显示 窗口 帮助 


QO 入 图片 


2. 整理 素材 库 
采集 好 的 图 片 可 以 按照 文件 夹 的 形式 进行 整理 ， 下 图 是 我 自己 所 列 的 文件 夹 目录 。Eagle 
还 可 以 为 文件 夹 选 择 不 一 样 的 颜色 ， 且 支持 多 重 条 件 筛选 图 片 。 
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云 存 储 一 一 坚果 云 


坚果 云 是 一 款 云 盘 同步 软件 ， 堪 比 百度 云 盘 的 升级 版 。 它 可 以 同步 计算 机 任何 位 置 的 文件 
夹 ， 不 用 像 icloud 一 样 ， 要 把 文件 夹 拖 到 制定 地 方才 能 同步 。 而 且 还 支持 协作 ， 你 可 以 和 
其 他 人 共同 维护 一 个 文件 夹 ， 实 时 同步 修改 内 容 。 它 支持 macOS 和 Windows 系 统 ， 移 动 
端 支 持 iOS 和 Android 系 统 。 


1. 两 台 计 算 机 文件 实时 同步 
安装 坚果 云 后， 计算 机 内 的 任何 一 个 文件 夹 右键 都 会 出 现 坚果 云 的 选项 ， 单 击 同步 到 个 人 
空间 ， 等 待 同步 完成 ， 就 可 以 在 客户 端 内 看 到 该 文件 夹 。 


文件 夹 右 键 开始 同步 
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当 想 要 把 客户 端的 文件 同步 到 另外 一 台 计 算 机 的 时 候 ， 可 单 击 客户 端的 对 应 文件 夹 后 面 的 
设置 ， 选 择 一 下 同步 到 本 地 的 路 径 ( 红 框 处 ) 。 这 样 文件 里 的 内 容 被 一 个 设备 修改 ， 也 会 
实时 同步 到 另 一 个 设备 上 。 


. 类 
的 民 力 人 
ren 


xf 
多 | su 多 次 > ee 


2. 历史 版 本 


当 误 删 文件 需要 找 回 的 时 候 ， 可 以 通过 坚果 云 的 历史 版 本 去 恢复 ， 坚 果 云 会 为 我 们 保留 3 
个 月 内 的 历史 文件 。 


Ye en 


ET 
mms 


3. Eagle、 坚 果 云 配合 


可 以 把 Eagle 的 本 地 文件 夹 放 到 坚果 云 里 同步 ， 然 后 在 另外 一 台 计算 机 上 把 Eagle 的 文件 
夹 同 步 下 来 ， 这 样 Eagle 素材 库 也 能 实现 云 同步 了 。 


高 保 真 交互 原型 一 一 Protopie 


Protopie 可 以 让 你 的 原型 自己 说 话 ， 无 须 输 代码 就 可 以 实现 几乎 所 有 交互 效果 。 操 作 原 理 
是 交互 = 对 象 + 触 发 动作 + 反应 动作 ， 非 常 适合 做 用 于 设计 稿 演示 的 高 保 真 原型 ， 且 支持 传 
感 交 互 ， 例 如 麦克 风 、3D Touch 等 。 支 持 macOS 和 Windows 系 统 ， 移 动 端 支持 iOS 、 
Android 系 统 。 


1. 操作 原理 
先 选择 触发 动作 的 对 象 ， 也 就 是 说 对 页 面 上 的 哪个 元 素 进行 操作 ， 会 发 生 交互 行为 ; 然后 
再 选择 触发 交互 行为 的 动作 ， 如 单 击 或 者 下 拉 等 。 


选择 触发 动作 的 对 象 


选择 触发 动作 


最 后 再 选择 发 生 交 互 行为 后 的 参数 以 及 图 层 ， 例 如 放大 至 500px，x 轴 移动 至 281px 等 。 
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2. 手机 实时 预览 
手机 下 载 客 户 端 之 后 ， 可 直接 预览 制作 的 效果 ， 百 分 百 模拟 开发 者 实现 后 的 效果 。 


动 效 制作 及 输出 一 一 AE+Lottie 


Adobe After Effects 简 称 AE， 是 Adobe 公 司 推出 的 一 款 图 形 视 频 处 理 软件 。 虽 说 其 特长 

在 于 制作 视频 动画 ， 对 于 UI 动 效 来 说 有 点 大 材 小 用 ， 有 些 烦琐 且 没 有 交互 行为 ; 但 它 配 

合 Airbnb 的 Lottie 使 用 ， 可 以 将 动 效 直接 导出 json 文件 ， 供 开发 者 直接 调用 ， 能 有 效 
减少 动 效 输出 的 成 本 以 及 开发 的 成 本 。 


1. 前 期 准备 
安装 好 AE 客户 端 以 及 插件 bodymovin.zxp 和 ZXP Installer 之 后 ， 单 击 AE 的 “窗口 - 
扩展 ”会 新 增 一 个 bodymovin ， 如 果 没有 就 表示 没有 安装 成 功 。 


oe 加 Lottie 揪 件 
< 至 0D iol 人 加 vj 办 Oy 


个 人 收藏 
侗 网 空投 送 | 国 三 
园 最 近 使 用 


人 icloud 云 盘 bodymovin.zxp ZXP Installer 


确定 插件 安装 成 功 后 ， 打 开 AE“ 编 辑 - 首选 项 - 常规 - 界面 ”， 选 中 允许 脚本 写 入 
文件 和 访问 网 络 〈 否则 后 面 导出 时 会 报错 ) ， 完 成 这 一 步 之 后 就 可 以 开始 正常 制作 动 
效 了 < 


2. 结合 Lottie 导出 json 文件 


单 击 扩展 里 的 bodymovin 插件 ， 就 会 出 现 所 做 的 动 效 。 选 择 需要 输出 的 动 效 以 及 文件 保 
存 地 址 ， 然 后 再 单 击 设置 图 标 ， 选 择 输出 的 格式 ， 选 中 第 2 个 和 倒数 2 个 并 保存 。 
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选择 输出 的 动 效 以 及 保存 地 址 选择 输出 格式 


单 击 Render 输出 文件 即 可 。 最 终 输出 的 文件 包含 json 文件 、 可 直接 预览 的 原型 以 及 使 
的 素材 文件 夹 。 


输出 正在 输出 


画 重 点 


以 上 介绍 了 一 些 好 用 的 软件 ， 包 括 在 线 协同 工具 石墨 文档 、 图 片 管 理工 具 Eagle、 云 存储 
工具 坚果 云 、 高 保 真 交互 原型 工具 Protopie、 动 效 制作 及 输出 工具 AE+Lottie。 这 些 都 能 
帮 有 我 们 在 一 定 程度 上 提高 工作 效率 ， 减 少 重复 性 工作 ， 非 常 值 得 一 试 。 


“sO 


. 
. 
ae。 
ER nee 
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01 情感 化 设计 理论 


文 / 付 铂 一 


情感 化 设计 是 完善 产品 、 提 升 用 户 体验 的 关键 。 在 当今 移动 应 用 泛滥 的 时 代 ， 只 有 存在 情 
感化 设计 的 产品 才能 脱颖而出 。 如 今 的 用 户 不 再 满足 于 与 冰冷 的 机 器 进行 互动 ， 更 希望 在 每 
次 操作 中 有 情感 上 的 互动 。 情 感化 设计 在 很 多 时 候 可 以 缓解 用 户 负 面 情 绪 ， 帮 助 用 户 快速 熟 
悉 产品 。 所 以 ， 了 解 情感 化 设计 并 有 效 地 运用 ， 是 一 款 好 产品 必 不 可 少 的 环节 。 


-情感 表现 


什么 是 情感 化 设计 


情感 化 设计 旨 在 抓 住 用 户 注意 力 、 诱 发 情绪 反应 ， 以 提高 执行 特定 行为 的 可 能 性 。 通 俗 地 
讲 ， 就 是 设计 某 种 方式 去 刺激 用 户 ， 让 其 有 情感 上 的 波动 。 通 过 产品 的 功能 、 产 品 的 某 些 
操作 行为 或 者 产品 本 身 的 某 种 气质 ， 让 用 户 产 生 情 绪 上 的 唤醒 和 认同 ， 最 终 使 用 户 对 产品 
产生 某 种 认 知 ， 在 心目 中 形成 独特 的 定位 ( 出 自 《 设 计 心理 学 》) 。 


情感 化 设计 三 要 素 与 产品 的 结合 


Donald A. Norman 的 《设计 心理 学 3: 情感 化 设计 》 一 书 中 ， 从 知觉 心理 学 的 角度 解释 
了 人 在 三 个 层次 的 本 性 ， 即 本 能 的 、 行 为 的 、 反 思 的 。 
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本 能 部 分 
情感 化 设计 三 要 素 
1. 本 能 水 平 的 设计 


本 能 水 平 设计 的 基本 原理 来 自 人 类 本 能 ， 这 一 层次 的 主要 物理 特征 是 视觉 、 听 觉 、 触 觉 占 主 
要 支配 因素 。 一 般 人 刚 看 到 一 个 物品 时 就 想 要 ， 往 往 是 出 于 本 能 选择 。 


案例 : 本 能 水 平 的 设计 在 移动 端 Ul 中 的 运用 就 是 视觉 的 体现 符合 大 众 认 知 ， 让 用 户 看 
到 后 就 有 想 下 载 的 冲动 。 由 此 也 可 见 设计 师 的 重要 性 ， 颜 值 才 是 产品 的 敲门砖 ， 如 下 
图 所 示 : 
aa 
已 @@Q SG 折 


NWP 


号 回 呈 日 器 


am 和 @ De 回 
i 
BIN ED SANA! BE 四 目 :| 
i 
mom omer, EL 
| wm 全 本 300000 [mm 
maa 
2.00%-9.00% 。 2.50%-8.90% 7 
i a 芝 室 同 二 
i ET 
会 加 = Qn 食 中 时 加 2 
-| i 
交通 银行 掌上 生活 


抛 开 不 同 银行 的 情景 ， 两 张 图 同 为 银行 的 首页 界面 ， 如 果 让 你 选择 一 个 App 留 在 手机 中 
会 怎么 选择 ? 我 咨询 了 100 位 亲朋 好 友 ， 最 终 选择 掌上 生活 的 人 占 82%; 选择 交通 银行 
的 占 18%。 


82% 18% 


通过 这 个 测试 我 们 可 以 看 出 ， 视 觉 效果 在 产品 初期 的 下 载 率 上 会 起 到 决定 性 作用 。 
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2. 行为 水 平 的 设计 
行为 水 平 的 设计 注重 的 则 是 效用 ， 产 品 需要 功能 良好 ， 操 作 简单 ， 并 具备 物理 感觉 ( 真实 
感觉 ) 。 以 使 用 者 为 中 心 才 是 设计 的 核心。 


案例 : 上 面 说 视觉 是 敲门砖 ， 那 么 行为 水 平 的 设计 就 是 用 户 愿 不 愿 继续 使 用 的 决定 因素 ， 
也 是 提升 用 户 体验 最 关键 的 部 分 。 再 好 看 的 设计 ， 如 果 用 户 使 用 起 来 有 诸多 不 爽 也 是 枉 
然 。 下 面 整理 了 一 部 分 行为 水 平 的 设计 案例 。 


1 ) 贴心 的 功能 
共享 单车 系列 的 产品 中 ， 我 最 喜欢 的 就 是 7 号 电 单 车 ， 什 么 原因 呢 ? 


7 号 电 单 车 在 开车 后 的 界面 中 有 两 个 操作 ，“ 临 时 锁 车 ”和 “结束 用 车 ”， 这 就 是 功能 
好 ， 摩 拜 就 没有 考虑 到 这 样 的 使 用 场景 : 我 需要 到 达 多 个 目的 地 且 停 留 时 间 都 很 得 ， 如 果 
不 锁 车 可 能 被 别人 偷 骑 走 ， 锁 了 车 又 会 被 别人 再 次 开锁 骑 走 。 所 以 就 功能 而 言 ，7 号 电 单 
车 的 体验 更 好 。 


摩 拜 单车 7 号 电 单车 


2 ) 引导 用 户 
产品 初期 和 迭代 中 都 会 存在 用 户 不 了 解 信息 以 及 功能 的 情况 ， 所 以 我 们 需要 用 文字 的 形式 
帮助 和 引导 用 户 。 


如 下 图 所 示 ，Keep 选 择 用 图 标 、 文 字 、 按 钮 的 组 合 引导 用 户 如 何 去 更 好 地 使 用 ， 微 信 则 
是 用 一 个 纯 文 字 的 弹 框 告知 用 户 需要 注意 的 事件 。 所 以 ， 在 产品 中 运用 通俗 易 懂 的 图 文 来 
告诉 用 户 当下 发 生 的 事情 和 需要 去 执行 的 事情 ， 也 是 情感 化 设计 的 重要 环节 。 
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Keep 


3. 反思 水 平 的 设计 
当 用 户 在 使 用 产品 后 ， 理 性 的 思考 往往 会 让 用 户 对 产品 做 出 一 个 评价 。 这 个 层次 涉及 文 
化 、 教 育 、 个 人 经 历 等 各 方面 ， 每 个 人 的 评价 都 不 一 样 。 


案例 : 平台 中 的 点 赞 功能 一 般 都 是 一 个 大 拇指 ， 所 以 用 户 也 不 会 因为 点 赞 而 记 住 产品 。 那 
么 ， 常 规 且 用 户 习惯 的 设计 ， 如 何 可 以 做 到 既 合理 又 有 特点 呢 ? 


如 下 图 所 示 ， 左 侧 是 微 博 ， 点 赞 图 标 是 常规 的 “大 拇指 ”设计 ， 不 会 给 用 户 留 下 深刻 的 印 
象 ; 而 右 侧 虎 扑 则 是 用 了 个 灯泡 图 标 配 上 文字 “ 亮 了 ”， 既 有 新 意 ， 又 符合 使 用 场景 ， 增 
加 用 户 的 点 击 欲望 。 可 能 有 人 会 反驳 ， 这 样 的 形式 增加 了 用 户 的 学 习 成 本 。 我 们 在 前 面 也 
讲 到 需要 反思 的 是 那些 常规 且 用 户 已 经 习惯 的 设计 ， 所 以 即便 改变 了 造型 ， 只 要 是 符合 用 
户 使 用 习惯 的 设计 ， 就 不 会 增加 用 户 的 学 习 成 本 。 


老生 们 六 全 侨居 人 闪 26 和 回复 这 了 什么 啊 ， 有 点 小 四 


微 博 虎 扑 


产品 不 仅 是 所 有 功能 的 集合 ， 它 们 真正 的 价值 是 可 以 满足 人 们 的 情感 需求 ， 而 其 中 最 重要 
的 需求 就 是 建立 自我 形象 与 社会 地 位 。 反思 水 平 的 设计 包含 并 超越 前 两 个 层次 ， 我 们 要 经 
常 思考 ， 为 什么 同类 型 的 产品 之 中 我 要 选择 它 ， 为 什么 它 给 我 留 下 了 很 深刻 的 印象 ， 这 都 
是 反思 水 平 的 设计 需要 做 的 。 
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情感 化 设计 的 作用 


1. 缓解 负面 情绪 

众所周知 ， 在 生活 中 等 待 是 最 容易 让 人 产生 负面 情绪 的 ， 设 计 中 也 是 如 此 ， 为 了 缓解 用 户 
的 焦虑 ， 减 少 等 待 时 间 是 很 必要 的 。 但 有 的 时 候 界面 加 载 时 间 受 很 多 客观 因素 影响 ， 没 有 
办 法 保证 其 速度 。 所 以 我 们 就 需要 通过 一 些 情感 化 设计 来 缓解 用 户 的 负面 情绪 。 


案例 ， 可 以 在 需要 用 户 等 待 的 地 方 加 入 一 些 动画 效果 ， 而 不 同 的 动画 效果 也 会 有 不 同 的 情 
感 传达 ， 如 下 图 所 示 : 


扩 . 
oo 


美 团 外 卖 土豆 视频 


美 团 外 卖 的 刷新 加 载 ， 是 一 只 袋鼠 骑 摩 托 的 动画 ， 因 为 是 送 餐 服务 ， 所 以 时 刻 都 在 给 用 户 
传达 “ 快 ”的 宗旨 。 有 趣 的 是 ， 在 App 中 袋鼠 的 动画 是 受 红 绿灯 影响 的 ， 也 传递 了 “绿灯 
行 ， 红 灯 停 ”的 交通 法 规 ， 很 有 意义 。 而 土豆 则 是 休闲 娱乐 的 视频 App， 所 以 加 载 动画 也 
会 传达 出 很 放松 的 情感 。 诸 如 此 类 的 动画 在 App 上 还 有 很 多 ， 只 要 在 需要 用 户 等 待 的 场景 
下 使 用 符合 情境 的 动画 ， 便 能 在 一 定 程度 上 减少 用 户 的 负面 情绪 。 


2. 引导 用 户 行为 

人 的 记忆 分 为 短期 记忆 和 长 期 记忆 ， 短 期 记忆 也 称 工作 记忆 ， 而 我 们 在 使 用 手机 时 通常 是 
短期 记忆 ， 为 了 完成 任务 而 临时 存储 的 信息 ， 一 般 会 保留 几 秒 。 所 以 在 设计 时 我 们 要 帮助 
用 户 ， 去 减轻 他 们 的 记忆 负担 ， 下 面 结合 实际 案例 来 详细 说 明 下 。 


案例 : 界面 中 标签 有 切换 功能 ， 在 同一 模块 中 选择 不 同 的 标签 ， 它 们 的 选中 状态 样式 是 相 
同 的 ， 如 下 图 所 示 : 
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马蜂 离 -首页 马蜂 高- 北京 
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不 要 增加 用 户 的 记忆 负担 ， 避 免 同 个 操作 在 不 同 模式 下 有 不 同 的 效果 。 


情感 化 设计 的 风险 


要 知道 情感 化 设计 是 为 满足 用 户 的 情感 需求 而 生 ， 有 些 情 感化 设计 是 需要 结合 产品 的 定 
位 、 文 化 区 域 而 定 的 。 事 物 存在 两 面 性 ， 有 的 情感 化 设计 会 得 到 用 户 的 喜爱 和 兴趣 ， 有 的 
则 会 给 用 户 带 来 负面 情绪 。 


1. 产品 定位 不 同 

不 同 的 产品 定位 需要 不 同 的 情感 化 设计 。 例 如 上 面 说 到 的 ， 美 团 为 了 体现 速度 用 了 袋鼠 骑 
摩托 的 动画 ， 而 土豆 主要 是 休闲 视频 ， 所 以 动画 效果 用 的 则 是 品牌 人 物 在 吃 爆 米 花 。 两 者 
调换 后 就 不 会 有 那么 好 的 效果 了 。 


2. 时 效 性 

情感 化 设计 是 有 时 效 性 的 ， 不 同 阶段 所 用 的 设计 也 会 有 所 区 别 。 例 如 过 节 时 期 ， 很 多 App 
都 会 把 界面 做 成 符合 节日 的 插画 、 图 标 等 ， 但 不 会 长 期 使 用 。 本 文中 举 的 很 多 例子 在 目前 
的 版 本 已 经 不 再 使 用 ， 如 下 图 所 示 : 


ee en 
双 了 1 馈 了 么 注 欢 节 
5 全 场 9 折 起 


饿 了 么 -常规 首页 饿 了 么 -世界 杯 首页 


图 中 左 侧 是 饿 了 么 的 常规 首页 ， 右 侧 是 它 在 世界 杯 时 期 的 界面 设计 。 页 面 的 Banner 以 及 
金刚 区 图 标 改版 后 都 围绕 世界 杯 主题 设计 ， 迎 合 当时 的 氛围 ， 喜 欢 世界 杯 的 用 户 或 许 也 


187 


188 


UI 那些 事 儿 : 新 手 设计 师 的 成 长 之 路 


会 选择 有 世界 杯 界面 的 外 卖 订 餐 。 但 世界 杯 的 时 段 一 过 ， 还 需要 恢复 为 常规 界面 ， 这 便 
是 时 效 性 。 


画 重 点 


( 1 ) 情感 化 设计 的 重要 性 : 提升 用 户 体验 、 提 升 下 载 率 、 保 证 留存 率 、 减 少 邱 载 率 ; 


( 2 ) 情感 化 设计 的 定义 旨 在 抓 住 用 户 注意 力 、 诱 发 情绪 反应 ， 以 提高 执行 特定 行为 的 
可 能 性 ; 


( 3 ) 情感 化 设计 三 要 素 : 本 能 水 平 的 设计 、 行 为 水 平 的 设计 、 反 思 水 平 的 设计 ; 
(4 ) 情感 化 设计 的 作用 : 减少 用 户 负面 情绪 、 引 导 用 户 行为 ; 


( 5 ) 情感 化 设计 的 风险 : 产品 定位 不 同 ， 情 感化 设计 需要 根据 不 同 的 产品 定位 设计 ， 否 
则 就 会 适得其反 ; 迎合 节日 活动 的 设计 不 可 以 长 久 使 用 ， 和 否则 体现 不 出 设计 的 时 效 性 、 特 
殊 性 和 融合 性 。 


参考 资料 
海边 来 的 设计 师 - 情感 化 设计 -三 部 曲 https://comesea.zcool.com.cn 


设计 师 ， 你 真 的 了 解 情 感化 设计 吗 “http://t.cn/EfiaTA3 

情感 化 设计 中 的 手绘 应 用 表现 http://t.cn/EfiSvNO 

情感 化 设计 在 产品 中 的 应 用 http://t.cn/EfiSxJl 

并 不 复杂 | 写 给 新 手 的 情感 化 Ul 设计 简明 指南 http://t.cn/EfiSllb 


Ul 界面 中 的 情感 化 设计 http://t.cn/EfiS1s2 
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02 格式 塔 原理 


文 / 吴 萌 


格式 塔 心理 学 派 中 的 “格式 塔 ” 源 自 德语 Gestalt， 意 思 是 “整体 ”“ 完 形 ”。 


该 原理 的 核心 理论 是 ， 人 的 视觉 具有 整体 化 、 简 化 处 理 图 形 的 倾向 ， 因 此 ， 当 一 个 不 完整 
的 图 形 出 现在 人 的 视觉 当中 时 ， 人 的 视觉 思维 会 倾向 于 自动 将 其 补 全 ， 使 其 变 成 一 个 已 知 
的 、 完 整 的 、 常 见 的 整体 图 形 ， 即 “ 完 形 ”。 


打 个 比方 说 ， 当 你 看 到 一 个 圆 形 ， 但 圆 形 的 边 上 有 一 个 很 小 的 缺口 ， 你 的 大 脑 会 倾向 于 将 
它 识别 为 一 个 完整 的 圆 形 ; 当 你 看 到 天 空中 的 一 朱云 ， 你 会 下 意识 地 把 它 想 成 一 个 动物 或 
一 个 别 的 你 知道 的 物体 的 形象 ; 往 远 了 说 ， 在 神话 故事 里 ， 那 些 妖魔 鬼怪 、 神 仙 车 萨 ， 他 
们 的 形象 也 是 由 已 知 的、 熟悉 的 形象 组 合 而 成 ， 而 不 是 赁 空 出 现 的 。 


格式 塔 作为 一 个 著名 的 心理 学 原理 ， 与 界面 设计 的 结合 也 比较 密切 。 例 如 它 可 以 帮助 我 们 
梳理 界面 的 信息 结构 、 层 级 关系 ， 提 升 界面 的 可 读 性 。 它 主要 有 几 个 特性 : 相似 性 、 接 近 
性 、 封 闭 性 、 连 续 性 、 主 体 与 背景 关系 和 均衡 性 ， 下 面 来 详细 讲述 。 


相似 性 


人 的 潜意识 里 会 根据 物体 的 形状 、 大 小 、 颜 色 、 亮 点 等 ， 将 视线 内 一 些 相 似 的 元 素 组 成 整 
体 ， 各 自分 类 。 如 下 方 左 图 ， 大 家 会 把 圆 形 的 一 列 看 成 一 个 整体 ， 菱 形 的 一 列 看 成 一 个 整 
体 ; 而 当 我 们 为 其 改变 颜色 的 时 候 ， 如 右 图 ， 它 所 传达 出 来 的 意思 又 发 生 了 改变 ， 人 们 会 
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把 绿色 的 一 行当 成 一 个 整体 ， 橙 色 的 一 行当 成 一 个 整体 。 


OPO be® 
OHPO O00 
OPO © 


由 此 可 以 看 出 在 人 们 的 潜意识 里 ， 对 于 形状 和 颜色 的 认 知 “比重 ”不 一 样 。 一 般 来 说 ， 在 
大 小 一 样 的 情况 下 ， 人 们 更 容易 把 颜色 一 样 的 看 成 一 个 整体 ， 而 忽略 形状 的 不 同 。 


所 以 当 我 们 有 几 个 平行 的 功能 点 ， 但 又 想 突出 一 个 的 时 候 ， 就 可 以 把 那 一 个 做 成 特殊 的 形 
状 或 者 是 不 同 的 颜色 、 大 小 等 ， 这 样 用 户 能 一 眼看 到 你 要 突出 的 部 分 ， 而 再 细 看 那 部 分 ， 
又 和 其 他 部 分 是 一 个 整体 ， 不 突 元 ， 类 似 于 平面 设计 中 的 “特异 ”。 


如 下 图 所 示 ， 美 图 秀 秀和 土豆 视频 通过 放大 、 加 深 拍照 、 拍 视频 的 图 标 ， 使 之 与 底部 标签 
栏 上 的 其 他 图 标 有 所 不 同 ， 但 是 又 能 看 出 来 同属 于 一 个 整体 。 
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接近 性 


元 素 之 间 的 相对 距离 会 影响 我 们 的 视觉 感知 ， 通 常 我 们 认为 互相 靠近 的 元 素 属于 同一 组 ， 
而 那些 距离 较 远 的 则 不 属于 同一 组 。 接 近 性 和 相似 性 很 像 ， 不 过 相似 性 强调 内 容 ; 而 接近 
性 强调 位 置 ， 元 素 之 间 的 相对 距离 会 直接 影响 它们 是 不 是 同属 于 一 组 。 如 下 图 所 示 ， 我 们 
会 把 左边 9 个 圆 形 当成 一 个 整体 ， 而 右边 则 会 把 第 一 列 当 成 一 个 整体 ， 把 第 二 、 三 列 当 成 
另外 一 个 整体 。 


引起 这 样 的 视觉 感受 主要 是 因为 圆 形 的 相对 距离 不 同 。 左 图 中 圆 形 距离 都 一 样 ， 没 有 对 比 ， 
而 右 图 第 二 、 三 列 的 圆 形 明显 靠 得 近 些 ， 自 然 它们 就 属于 一 组 ， 较 远 的 第 一 列 则 不 属于 。 


在 UI 中 最 常见 的 就 是 列表 以 及 文字 展示 、 图 文 展示 了 ， 在 列表 页 信息 多 的 时 候 ， 都 会 把 趋 
于 相似 的 功能 放 在 一 起 ， 利 用 接近 性 原理 ， 使 它们 在 视觉 上 趋 于 一 个 整体 。 这 样 既 能 让 界 
面 功能 清晰 易 懂 ， 又 不 至 于 杂乱 无 章 。 


Er 6 全 om si 
我 Ed St 


”三 “得 子 的 相 子 加 时 
珊 信 和 号: kk7359 日 
1 我 关注 的 人 0 关注 我 的 
区 长 包 
国 我 的 学 生 证 

让 kk 如 
加 机 © sem 
局 让 包 © sober 法 痛 

表情 
已 © pa 加 

设置 
© Prass 


加 9 5 友 
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在 文字 展示 中 ， 标 题 也 会 更 趋 近 于 自己 的 正文 内 容 ， 使 得 信息 层级 区 分 得 更 明显 。 


中 国 中 动 全 2208 712% 


《 无 悔 青春 畅游 


日 期 局 


a 


无 必 青 春 畅游 


,推荐 里 期 游 目 的 地 


否 韦 己 一 个 港 所 的 青春 旅行 回忆 


其 实 这 一 点 ， 和 《 写 给 大 家 看 的 设计 》 中 作者 Robin Williams 提出 的 “亲密 性 ”意思 一 
样 ， 亲 密 性 主要 讲 的 是 彼此 有 关联 的 元 素 在 页 面 上 的 距离 要 近 些 ， 而 没有 关联 的 要 离 得 远 
些 。 如 果 页 面 上 元 素 的 亲密 性 一 样 ， 那 么 我 们 就 会 把 它 当 成 一 个 整体 。 


封闭 性 
人 的 眼睛 在 观看 时 ， 大 脑 并 不 是 在 一 开始 就 区 分 出 各 个 单一 的 组 成 部 分 ， 而 是 将 各 个 部 分 


组 合 起 来 ， 使 之 成 为 一 个 更 易于 理解 的 统一 体 。 这 个 统一 体 是 我 们 日 常生 活 中 常见 的 形 
象 ， 如 正方 形 、 圆 形 、 三 角形 、 猫 、 狗 等 。 


s 


如 苹果 公司 的 logo 就 算 存在 缺口 ， 但 是 我 们 还 是 能 一 眼看 出 它 就 是 个 苹果 的 外 形 ; 而 右边 
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的 熊猫 头 部 和 背部 都 没有 明显 的 封闭 界限 ， 但 是 我 们 还 是 会 把 它 当成 一 个 完整 的 熊猫 ， 甚 
至 不 会 觉得 奇怪 。 

这 一 原则 在 很 多 地 方 都 会 用 到 。 例 如 在 第 一 页 屏幕 中 ， 我 们 总 会 露出 下 一 个 模块 的 边 角 ， 
或 者 是 可 滑动 的 banner 图 ， 都 会 外 露 下 一 模块 的 内 容 。 这 本 质 上 就 是 利用 了 这 一 原则 ， 
人 的 眼睛 有 自动 补 全 功能 ， 不 用 看 到 全 部 ， 也 能 脑 补 出 下 一 模块 会 出 现 什么 。 


i 
游戏 OO 
| 
宝 钻 传奇 § 


用 彩色 宝珠 创造 美丽 珠宝 


热血 沸腾 的 PvP 游戏 二 看 全 部 


这] 0 Es ( 
3 


Be 
加 多 名 um Q 
淘 票 票 App Store 


连续 性 


人 的 视觉 具备 一 种 运动 的 惯性 ， 会 向 一 个 方向 延伸 ， 以 便 把 元 素 连接 在 一 起 形成 整体 。 如 
下 图 ， 你 是 会 把 它 当成 两 个 大 的 圆 形 ， 还 是 当成 无 数 个 小 圆 呢 ? 姓 庸 置疑 ， 第 一 眼看 到 的 
时 候 ， 肯 定 是 两 个 大 的 圆 形 ， 而 不 是 无 数 个 小 圆 。 
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主体 与 背景 关系 


我 们 在 看 一 个 页 面 的 时 候 ， 总 是 不 自觉 地 将 视觉 区 域 分 为 主体 和 背景 ， 而 且 会 习惯 把 小 
的 、 突 出 的 那个 看 成 是 背景 之 上 的 主体 。 主 体 越 小 的 时 候 ， 主 体 与 背景 的 对 比 关系 越 明 
显 ， 主 体 越 大 则 关系 越 模糊 。 


白色 表示 主体 灰色 表示 背景 


而 在 UI 设 计 中 ， 最 常见 的 区 分 背景 和 主体 的 方式 就 是 蒙 版 遮 重 以 及 毛 玻璃 效果 ， 这 两 种 都 
能 起 到 弱化 背景 、 突 出 主体 的 作用 ， 使 得 它们 的 对 比 关系 更 明显 。 


三 末 限 角 全 于 精 寺 和 利 


SOOO 


现下 到 ”再 关 三 PIC 来 短 。T 天 双 


小 红 书 微 博 


当主 体 达 到 最 大 值 一 一 全 屏 的 时 候 ， 主 体 与 背景 合 二 为 一 ， 主 体 与 背景 的 对 比 区 分 就 不 存 
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在 了 。 这 种 情况 常用 于 全 屏幕 的 弹 窗 。 


QQ、 扫 于 要 世间 安放 试 


ED za Te 


x 
搜 " 圣 塞 巴 斯 蒂 安 " 试 试 


人 任何 地 广 
9 Mf 

@ 四 -人 性 
9 # 京 -性 
9 RN 
大 和 汐 - 性 
9 东京 -位 
人 首尔 .1 位 


均衡 性 


人 在 观察 一 个 物体 的 时 候 ， 会 下 意识 地 去 寻找 它们 的 平衡 点 。 元 素 在 页 面 上 处 于 一 种 平 
衡 状态 ， 看 起 来 是 一 样 大 小 ， 会 让 人 心情 舒缓 愉悦 。 而 在 App 界面 设计 中 这 一 点 尤为 重 
要 ， 可 能 你 在 设计 的 时 候 会 不 自觉 地 运用 这 一 点 。 


需要 注意 的 是 ， 视 觉 大 小 关 物 理 大 小 ， 例 如 边 长 和 直径 相同 的 正方 形 和 圆 形 ， 在 视觉 上 我 
们 会 觉得 它们 不 是 一 样 大 的 。 
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当 我 们 要 让 其 变 得 “一 样 大 ” 的 时 候 ， 就 可 以 选择 将 圆 形 调 大 一 点 ， 或 者 把 正方 形 调 小 一 
点 ， 让 它们 在 视觉 上 保持 一 致 。 
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这 点 在 实际 工作 中 要 尤为 注意 ， 很 多 时 候 图 标 物 理 大 小 是 一 样 的 ， 但 视觉 大 小 并 不 是 一 样 
的 。 而 我 们 的 输出 物 最 终 是 以 视觉 呈现 的 ， 所 以 必须 保证 视觉 效果 一 样 。 


> 
LJ L JJ 


物理 大 小 一 样 ， 视 觉 效果 不 一 样 视觉 效果 一样 
画 重 点 
格式 塔 原理 有 以 下 几 种 特性 ， 


相似 性 : 人 的 潜意识 里 会 根据 形状 、 大 小 、 颜 色 、 亮 点 等 ， 将 视线 内 一 些 相似 的 元 素 组 
成 整体 。 


接近 性 : 元 素 之 间 的 相对 距离 会 影响 我 们 的 视觉 感知 ， 通 常人 们 会 认为 互相 靠近 的 元 素 属 
于 同一 组 ， 而 那些 距离 较 远 的 则 不 属于 同一 组 。 


封闭 性 ， 人 的 大 脑 在 看 一 个 物体 的 时 候 ， 会 更 趋 近 于 把 它 当 作 一 个 整体 ， 而 不 是 单个 部 分 。 


主题 与 背景 关系 : 我 们 在 看 一 个 页 面 的 时 候 ， 习 惯 于 把 小 的 、 突 出 的 部 分 看 成 是 背景 之 上 
的 主体 。 主 体 越 小 的 时 候 ， 主 体 与 背景 的 对 比 关系 越 明显 ， 主 体 越 大 则 关系 越 模糊 。 


均衡 性 : 人 们 在 观察 一 个 物体 的 时 候 ， 会 下 意识 地 去 寻找 它们 的 平衡 点 ， 元 素 在 页 面 上 处 
于 一 种 平衡 状态 ， 会 让 人 心情 舒缓 愉悦 。 


其 实在 实际 中 ， 格 式 塔 的 各 个 特性 一 般 都 不 会 孤立 存在 ， 它 们 都 是 相互 影响 的 。 例 如 均衡 
性 里 说 到 的 图 标 元 素 在 视觉 上 保持 统一 ， 里 面 也 涉及 相似 性 ， 即 人 们 更 容易 把 相似 的 物体 
当成 一 组 。 所 以 我 们 不 要 孤立 地 去 想 它 、 用 它 。 
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03 ” 巴 甫 洛 夫 反 应 


文 / 姜 正 


我 们 面 对 未 知事 物 总 是 抱 有 好 奇 心 ， 总 是 会 猜测 到 底 发 生 了 什么 。 例 如 我 们 在 手机 上 接收 
到 产品 的 推送 或 者 好 友 发 来 的 消息 时 ， 我 们 总 是 会 忍 不 住 打开 手机 看 一 下 ， 但 我 们 却 不 知 
道 它 什么 时 候 会 给 你 发 送 消息 ， 或 者 是 谁 会 给 你 发 送 消息 。 


表面 上 是 我 们 的 好 奇 心 在 驱使 ， 实 质 上 则 是 我 们 体内 的 多 巴 胺 系统 对 于 外 界 刺激 做 出 了 反 
应 ， 而 多 巴 胺 系统 恰恰 是 巴 甫 洛 夫 反 应 的 控制 器 。 巴 甫 洛 夫 反 应 是 我 们 在 设计 中 最 经 常 使 
用 的 心理 学 说 之 一 ， 通 过 巴 甫 洛 夫 反 应 能 够 帮助 我 们 解释 人 们 为 什么 乐于 对 日 常 接收 的 信 
息 内 容 做 出 迅速 的 反应 ， 它 也 能 指导 我 们 日 常 的 设计 工作 。 


巴 甫 洛 夫 反应 的 定义 


巴 甫 洛 夫 反应 由 俄罗斯 生理 学 家 巴 甫 洛 夫 (lvan Petrovich 
Pavlov，1849 一 1936 ) 创立 。 巴 甫 洛 夫 反 应 是 指 对 于 具有 特定 线 
索 、 可 被 预示 即将 发 生 的 事物 ， 我 们 的 身体 会 立刻 做 出 反应 ， 巴 甫 
洛 夫 反应 又 称 “ 条 件 反 射 定律 ”。 


值得 一 提 的 是 ， 巴 甫 洛 夫 反应 的 控制 器 是 我 们 身体 的 多 巴 胺 系统 。 
针对 不 同 外 界 环 境 的 刺激 ， 我 们 体内 的 多 巴 胺 系统 会 做 出 不 同 的 应 
对 反应 ， 而 且 生 物体 内 的 多 巴 胺 系统 对 能 够 得 到 奖励 的 刺激 尤为 敏 
感 ， 并 且 充 满 期 待 。 


举 一 个 简单 的 例子 ， 训 厂 师 这 个 职业 就 是 成 功利 用 巴 甫 洛 夫 反 应 的 
最 佳 案例 之 一 ， 训 太 师 往往 会 通过 物质 和 行为 的 不 断 刺 激 ， 给 予 宠 
物 厂 一些 奖励 让 它 记 住 一 些 特定 的 信号 和 动作 ， 一 旦 训 犬 师 做 出 特 
定 的 动作 ， 宠 物 大 就 会 接收 信号 做 出 特定 的 反应 ， 期 待 得 到 相应 的 
奖励 。 例 如 简单 的 坐 下 、 握 手 等 动作 都 是 对 巴 甫 洛 夫 反 应 的 表现 。 


197 


198 


UI 那些 事 儿 : 新 手 设计 师 的 成 长 之 路 


应 用 场景 


1. 消息 提示 

经 常 有 同学 说 自己 有 强迫 症 ， 看 到 App 图 标的 小 红 点 ( 徽标 ) 就 想 点 掉 ， 其 实 这 正 是 产 
品 利用 了 巴 浦 洛 夫 反应 。 通 过 徽标 这 一 特定 线索 ， 预 示 着 用 户 收 到 了 新 的 消息 内 容 ， 导 致 
用 户 看 到 徽标 就 迫不及待 想 点 击 查看 。 


经 常 出 现 的 使 用 场景 有 底部 导航 栏 、 底 部 操作 栏 、 信 息 列表 、 核 心 功能 等 ， 以 微 信和 易 信 
为 例 ， 通 常 以 徽标 的 形式 出 现在 功能 图 标 和 用 户头 像 的 右上 角 以 及 信息 栏 未 尾 的 位 置 ， 通 
知 用 户 当前 有 未 读 取 的 消息 内 容 ， 如 下 图 所 示 : 


了 FF737 I 和 下 7 可 CPE Ten 


短信 (4) © 电话 易 值 十 
人 nm @ ee 
订阅 号 消息 © 易 人 支付 Se 和 

微 信 运 动 易 信 团队 
DG” © ‘ 

争 于 下 【v) 公众 号 

人 @ .e 

58 58 同 城 

+ ma 


度 云 课 宇 Ul 微 专业 一 期 易 信 妊 


Am 出击 下 


2. 信息 简介 


在 多 巴 胺 系统 中 ， 人 少量 的 信息 并 不 能 满足 用 户 对 于 更 加 全 面 和 完整 的 信息 的 追求 。 在 产品 
中 ， 由 于 受到 硬件 载体 的 限制 ， 无 法 将 详细 的 信息 一 下 子 全 部 显示 出 来 ， 所 以 通过 信息 简 
介 的 形式 ， 以 简短 的 标题 告诉 用 户 当前 模块 的 内 容 主 题 。 产 品 正 是 利用 巴 甫 洛 夫 反应 ， 通 
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过 简短 的 标题 信息 来 吸引 用 户 ， 引 导 用 户 点 击 查 看 详情 页 面 。 例 如 ，36 氮 、 今 日 头条 、 好 
奇 心 日 报 都 是 通过 简短 的 信息 来 吸引 用 户 ， 利 用 用 户 对 更 多 、 更 加 全 面 信息 的 渴求 诱导 


点 击 。 


一 主人 手机 走 位 : 在 划 生 和 

打卡 ， 王 能 有 内 

pouf 收购 再 公司， 机 和 和 
名 的 一 从 加 过 指南 

用 风 可 天 | 月 和 多 WAC 中 
25% 和 可! | 


36 氟 


3. 沉浸 式 体 验 设计 


ETTTTTTTTT 所 


关 兆 准 荐 热点 坟 京 视频 国 风 三 
习近平 的 2019, 一 月 六 个 金 句 看 新 年 
开局 


央视 性 评 | 坚定 不 称 走 中 国 特色 社会 主义 
法 治 通路 


王 坡 与 要 加 外 长 吉 路 辜 
两， 共同 维护 南海 航行 飞 
赴 自 由 


可 机 委 走 磋 哈 风 接 小 腑 训 不 办 少 女 范 个 
人 又 咀 晴 


报 人 | 与 《耐心 
加 -at 


昌江 来 人 太 眼 8 分 
以 上 时 六 ， 旬 看 到 22 
也 了 | 同和 和 


政治 信人 的 语言 发 
me ana 


UARE PE 幅 
9 


好 奇 心 日 报 


当 用 户 面 对 Feed 流 、 卡 片 流 、 瀑 布 流 等 沉浸 式 的 设计 形式 时 ， 当 前 页 面 的 内 容 极 有 可 能 


不 满足 用 户 的 需求 ， 因 为 用 户 总 


是 渴望 得 到 更 多 、 更 全 面 的 内 容 。 这 时 用 户 会 通过 不 断 下 


拉 这 一 交互 行为 ， 查 看 隐藏 在 屏幕 下 端 未 显示 的 内 容 来 满足 自己 ， 如 下 图 所 示 : 


CP im 
| © YY 六 入 


扒 玉 Wi 富有 


ri 0 


热门 pm wm mm mg ms wm 员 


Same 


199 


200 


UI 那些 事 儿 : 新 手 设计 师 的 成 长 之 路 


大 众 点 评 、nice、same 都 是 利用 用 户 对 于 更 多 、 更 全 面 信息 的 追求 ， 刺 激 用 户 不 断 下 
拉 浏 览 新 的 信息 。 这 不 但 提高 了 用 户 的 浏览 量 ， 同 时 也 提高 了 产品 的 沉浸 感 。 


4. 弹 幕 

面 对 源 源 不 断 弹出 的 弹 幕 ， 用 户 总 是 充满 了 期 待 。 弹 幕 按照 特定 的 轨迹 ( 线索 ) 运动 预示 
着 即将 出 现 新 的 内 容 ， 让 用 户 对 此 产生 期 待 ， 渴 望 看 到 下 一 条 弹 幕 以 及 后 续 其 他 用 户 源源 
不 断 产生 的 内 容 ， 也 让 用 户 愿 意 花 更 多 时 间 停 留 在 当前 页 面 当中 。 


哗 哩 哗 哩 


在 我 们 平时 使 用 的 大 部 分 视频 软件 中 都 有 弹 幕 的 功能 ， 弹 幕 看 似 破 坏 了 用 户 的 沉浸 感 ， 
但 是 所 产生 的 内 容 能 让 用 户 更 加 沉浸 其 中 。 例 如 ， 哗 哩 哗 哩 将 弹 幕 固定 在 顶部 1/4 的 区 域 
中 ， 不 会 影响 用 户 观看 画面 ， 让 用 户 可 以 享受 到 视频 和 弹 幕 带 来 的 双重 快乐 。 


5. 更 多 和 全 部 


在 屏幕 中 所 能 显示 的 内 容 是 有 限 的 ， 这 往往 不 能 满足 人 们 对 更 多 和 更 全 面 内 容 的 需求 ， 所 
以 在 大 部 分 情况 下 我 们 会 利用 横 轴 交 互 和 “更 多 ”“ 全 部 ”的 功能 按钮 。 横 轴 交 互 是 利用 
横向 的 未 知 空间 ( 即 屏幕 右 侧 的 隐藏 空间 ) 展示 隐藏 内 容 的 局 部 ， 一 般 会 结合 卡片 式 的 设 
计 ， 通 过 卡片 滑动 展示 更 多 的 信息 内 容 。 


ie] 


新 年 好 马上 只 要 元 


会 日 加 口 上 


mee ne a 本 日 


下 厨房 


“更 多 ”和 “全 部 ”也 是 常见 的 功能 之 一 ， 通 常 以 功能 按钮 的 形式 出 现 。 更 新 、 更 多 预示 
着 还 有 大 量 的 隐藏 内 容 没有 展现 出 来 ， 这 对 用 户 的 吸引 力 无 疑 是 巨大 的 。 常 见于 金刚 区 或 


者 运营 的 专题 活动 区 。 
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HandsUPor 


D+ 
@ 分 享 线 


牛 姐 Marieh Carey 全 新 专辑 《Caution) 强 
势 日 归 ， 花 乌 钳 效应 即将 席卷 全 球 ! 最 新 专 
辑 收录 包括 全 球 数字 冠军 曲 《GTFO》、 

《With You)》、《The Distance) 三 首 别 
如 主打 和 7 首 风云 单 掀 ， 掌 控 流行 、 打 造 潮 
流 pi i 


网 易 云 音乐 


腾讯 漫画 


下 厨房 
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6. 奖励 机 制 

多 数 产品 会 通过 一 定 的 机 制 给 予 用 户 “ 奖 励 ”刺激 用 户 参加 运营 活动 ， 因 为 人 体内 的 多 巴 
胺 系统 对 奖励 的 刺激 尤为 敏感 ， 一 旦 出 现 就 会 立马 做 出 反应 。 例 如 春节 期 间 的 集 福 卡 活 
动 ， 奖 励 总 和 是 巨大 的 ， 例 如 “瓜分 四 个 亿 ” 之 类 ， 极 具 吸 引力 。 即 使 用 户 知道 自己 最 终 
所 得 不 多 ， 但 是 面 对 这 一 巨大 利益 的 吸引 也 愿意 积极 参与 。 


支付 宝 集 福 卡 的 活动 通过 扫描 “ 福 ” 字 获得 福 卡 ， 而 且 每 张 福 卡 都 有 一 次 抽奖 机 会 ， 未 知 
的 奖励 更 加 刺激 了 用 户 的 好 奇 心 ， 促 使 用 户 不 断 扫描 福 卡 ， 沉 浸 在 集 福 卡 的 活动 中 。 当 然 
常见 的 使 用 场景 还 有 分 享有 礼 、 邀 请 好 友 有 礼 、 分 享 返还 红包 等 ， 这 些 都 在 一 定 程度 上 提 
高 了 产品 在 其 他 平台 的 曝光 率 。 


支付 宝 盒 马 鲜 生 


7. 成 就 系统 

成 就 系统 是 指 产 品 给 予 人 们 精神 上 的 奖励 ， 通 过 特定 的 机 制 ， 用 户 只 要 按照 一 定 的 方法 去 
执行 就 能 获得 系统 内 一 定 的 成 就 。 在 这 里 运营 机 制 就 是 明确 线索 ， 成 就 就 是 最 终 预 示 的 结 
果 。 例 如 WALKUP 运动 中 的 排名 ， 就 是 通过 用 户 每 日 的 行走 步 数 来 计算 的 。 
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87298 6 

83476 3 

67597 吕 

60355 加 
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WALKUP 


成 就 系统 大 多 应 用 在 产品 游戏 化 的 场景 中 ， 例 如 常见 的 排名 系统 和 勋章 系统 等 ， 成 就 系统 
能 够 有 效 激 发 用 户 的 积极 性 ， 提 高 产品 的 日 活 。 


画 重 点 

(1 ) 巴 甫 洛 夫 反 应 又 称 “条 件 反射 定律 ”， 它 的 控制 器 是 体内 的 多 巴 胺 系统 ， 针 对 外 界 
的 刺激 ， 身 体会 主动 做 出 反应 。 

(2 ) 巴 甫 洛 夫 反 应 的 应 用 范围 较 广 ， 主 要 应 用 场景 必须 建立 在 特定 的 线索 上 ， 线 索 可 预 
示 即 将 发 生 的 事情 ， 能 刺激 用 户 对 此 做 出 反应 。 

参考 资料 


Suan Weinschenk. 设计 师 要 懂 心 理学 [M]. 徐 佳 ， 马 迪 ， 余 盈 亿 ， 译 . 北京 : 人 民 邮 电 出 
版 社 ，2013 
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UI 那些 事 儿 : 新 手 设计 师 的 成 长 之 路 


文 / 刘 芳 


在 我 刚 做 设计 时 ， 我 的 总 监 总 说 : “这 个 按钮 应 该 再 大 一 点 ”“ 那 两 个 按钮 离 远 一 
点 ”“ 图 标 最 好 放 在 这 个 位 置 ”…… 那 时候 我 总 是 不 理解 为 什么 要 这 样 做 。 直 到 我 看 到 费 
茨 定律 才 明白 ， 按 钮 越 大 ， 用 户 操作 所 需 时 间 越 短 ; 距离 越 远 ， 用 户 操作 所 需 时 间 越 长 。 
本 文通 过 一 些 实际 案例 ， 讲 述 什么 是 费 茨 定律 及 其 如 何 指导 界面 设计 ， 分 析 它 在 移动 端 界 
面 中 的 应 用 。 


费 茨 定律 是 人 类 运动 的 预测 模型 ， 主 要 用 于 人 机 交互 和 人 体 工 程 学 。 该 定律 预测 光标 或 手 
指 从 一 个 起 始 位 置 移动 到 最 终 目 标 所 需 的 时 间 ( 厂 ) 由 两 个 参数 决定 ， 即 光标 或 手指 到 目 
标的 距离 (DD ) 和 目标 的 大 小 ( W) 。 


用 数学 公式 表达 为 太 =g + 如 logz ( D/W + 1 )。 其 中 a、b 是 经 验 常 数 ，a 代 表 手 指 开始 到 停 
止 的 时 间 ，b 代 表 手 指 的 移动 速度 。 


《一 几 一 一 


2 “BE 
T=a+blogz (DIW+1) 


举 一 个 生活 中 开 灯 的 例子 : 


早期 的 开关 只 有 一 个 手指 大 ， 每 次 开 灯 的 时 候 都 需要 将 手 移动 到 开关 上 方 ， 然 后 伸 出 手指 
调整 到 适合 位 置 再 按 下 。 由 于 按钮 小 ， 在 没 开 灯 的 时 候 你 根本 不 知道 它 在 哪里 ， 需 要 不 停 
地 摸 ， 所 需 时 间 就 比较 长 。 


后 期 大 家 意识 到 了 这 个 问题 ， 将 开关 按钮 设计 得 更 大 ， 人 们 操作 时 只 需要 将 手 移动 到 按钮 
上 方 ， 不 需要 调整 直接 按 下 即 可 ， 所 需 时 间 就 大 大 变 短 了 。 
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早期 开关 -小 按钮 后 期 开关 -大 按钮 


上 by be 
如 何 指导 界面 设计 
费 蒋 定 律 应 用 比较 广泛 ， 其 对 移动 界面 设计 也 有 很 好 的 启发 意义 。 结 合 费 蒋 定 律 公式 可 以 
越 快 ， 越 容易 错误 操作 。 


1. 按钮 越 大 ， 所 需 时间 越 短 


当 到 目标 的 距离 一 定时 ， 目 标 越 大 ， 所 需 时 间 越 短 ， 反 之 越 长 。 例 如 支付 宝 的 登录 流程 ， 
如 下 图 所 示 : 


图 效 二 ee 
EEC 
“= | EN 
支付 宝 -初始 页 支付 宝 - 登 录 页 支付 宝 - 刷 脸 登 录 


左 图 是 支付 宝 初始 页 ， 该 页 面 主要 让 用 户 选择 合适 自己 的 操作 方式 。 因 此 在 设计 上 采用 登 
录 和 注册 按钮 并 排 ， 目 标 区 域 较 小 ， 给 用 户 充 分 选择 的 时 间 。 


中 图 和 右 图 ， 界 面 中 仅仅 只 有 一 个 按钮 ， 其 他 注册 账号 、 遇 到 问题 、 用 海外 手机 号 登录 、 
换个 方式 登录 等 都 采用 文字 高 亮 的 方式 进行 了 弱化 ， 用 户 使 用 时 不 用 想 就 知道 该 点 击 哪个 
按钮 ， 大 大 减少 了 操作 时 间 ， 让 用 户 可 以 专注 于 登录 。 
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2. 距离 越 远 ， 所 需 时 间 越 长 
当 按钮 大 小 一 定时 ， 手 到 目标 的 距离 越 远 ， 所 需 时 间 就 越 长 ， 反 之 越 短 。 但 是 这 里 就 发 现 
一 个 问题 ， 移 动 端 如 何 判断 手 到 目标 的 距离 呢 ? 这 里 我 们 可 以 借用 拇指 热 区 来 进行 判断 。 


随 着 手机 越 来 越 大 ， 不 同 机 型 的 拇指 热 区 会 有 所 差异 ， 以 右手 操作 iPhone 6 为 例 ， 它 的 拇 
指 热 区 如 下 图 所 示 : 


@ ew 
@ ths 


@ xn 


根据 图 例 可 知 1 号 区 域 是 我 们 手指 最 容易 达到 的 ; 2 号 区 域 是 伸 长 手指 才能 触 达 ， 操 作 相 
对 较 难 ; 3 号 区 域 为 难以 触及 的 区 域 。 我 们 可 以 判断 手指 到 1 号 区 域 的 时 间 最 短 ， 到 3 号 区 
域 的 时 间 最 长 。 因 此 在 设计 时 需要 将 重要 层级 高 的 按钮 放 到 拇指 热 区 手指 能 轻松 触 达 的 部 
分 ， 让 目标 离 手指 更 近 ， 从 而 提高 操作 速度 ， 如 下 图 所 示 : 


大 众 点 评 大 众 点 评 -拇指 热 区 图 
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微 信 读 书 微 信 读 书 -拇指 热 区 图 


以 上 两 个 案例 均 是 Feed 流 界面 ， 在 卡片 中 露出 的 功能 有 点 赞 、 评 论 、 分 享 这 三 个 按钮 。 
其 中 ， 大 众 点 评 中 点 赞 的 重要 性 层级 最 高 ， 因 此 将 其 放 在 最 易 触 达 的 绿色 区 域 ， 单 手 操作 
时 离 手 指 距离 最 近 ; 分 享 和 评论 则 放 在 了 手指 伸 长 和 难以 触 达 的 杰 色 和 红色 区 域 ， 单 手 操 
作 时 离 手指 更 远 。 


微 信 读 书 中 分 享 的 重要 层级 最 高 ， 因 此 将 其 放 在 最 易 触 达 的 绿色 区 域 ， 单 手 操作 更 方便 。 


3. 手 移动 越 快 ， 越 容易 错误 操作 


其 实 不 管 你 手 的 速度 有 多 快 ， 当 距离 较 远 、 按 钮 较 小 时 ， 手 移动 到 按钮 上 方 就 得 停 下 来 进 
行 定 位 然后 才能 准确 进行 操作 ， 如 果 只 要 求 速度 ， 手 移动 过 来 直接 点 击 有 可 能 就 点 中 不 了 
按钮 ， 容 易 进 行 错误 操作 。 


因此 在 UI 设计 中 ， 如 果 我 们 想 要 让 用 户 能 够 快速 操作 ， 可 以 为 用 户 打破 距离 和 大 小 带 来 的 
限制 ， 结 合 手势 操作 来 进行 设计 ， 如 下 图 所 示 : 
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TP i 5 二 
微 入 (426) Qa @ 公信 1) @ 
国 > - 

加 = 
加 站 信 运动 


标 为 已 国 


置顶 公众 号 
取消 关注 


删除 沪 聊 天 


上 2 oP" ££ GG 2 


Er a sn Eo 


微 信 - 安 卓 端 微 信 -iOS 端 


以 微 信 为 例 ， 在 微 信 列 表 中 为 了 让 用 户 能 够 快速 操作 列表 ， 引 入 了 手势 操作 ( 安 卓 长 按 、 
iOS 侧 滑 ) ， 当 长 按 或 侧 滑 列表 时 ， 就 会 在 当前 位 置 出 现 操作 内 容 ， 提 高 操作 效率 。 


在 移动 端 界 面 中 的 应 用 


在 实际 交互 设计 中 ， 合 理 使 用 费 茨 定律 可 以 让 我 们 的 界面 使 用 更 流畅 ， 错 误 率 更 低 。 下 面 
我 们 一 起 来 看 看 费 茨 定律 的 四 大 应 用 场景 。 


1. 来 电 显示 场景 一 一 不 同 状态 ， 不 同 设计 方式 

iOS 的 来 电 提示 在 锁 屏 和 苏醒 状态 分 别 采 用 滑动 接听 和 点 击 接听 ， 可 以 很 好 地 用 费 茨 定律 
来 解释 。 

锁 屏 时 : 用 户 手 机 场景 不 确定 ， 很 容易 意外 点 击 。 在 设计 时 就 需要 增加 操作 距离 、 延 长 操 
作 时 间 ， 防 止 误 操作 的 情况 。 采 用 滑动 解锁 可 以 增加 操作 的 距离 ， 放 在 该 场景 中 使 用 较为 


合适 。 


苏醒 时 : 用 户 正在 使 用 手机 ， 这 时 候 采 用 滑动 操作 距离 太 长 了 ， 因 此 设计 为 按钮 的 样式 ， 
用 户 可 快速 点 击 接受 或 拒绝 ， 进 而 提高 用 户 操作 效率 。 
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锁 屏 状态 -来 电 苏醒 状态 -来 电 


2. 将 返回 浮 于 底部 操作 栏 中 一 一 缩短 操作 距离 和 时 间 
随 着 屏幕 越 来 越 大 ， 拇 指 热 区 也 发 生 了 变化 ， 你 会 发 现 左上 角 的 返回 按钮 单 手 操作 越 来 越 
不 可 能 ， 尤 其 是 Plus、iPhone X 的 出 现 使 返回 按钮 显得 有 点 鸡肋 。 不 过 在 体验 资讯 类 的 


产品 时 发 现 ， 它 们 将 部 分 界面 的 返回 按钮 放 到 了 界面 底部 左下 角 的 位 置 ， 下 面 将 对 这 两 种 
情况 进行 对 比 ， 如 下 图 所 示 : 


今日 头条 虎 嗅 
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以 今日 头条 的 详情 页 为 例 ， 返 回 按钮 在 常规 的 左上 角 。 结 合 拇指 热 区 会 发 现 左 上 角 的 区 域 
单 手 是 很 难 到 达 的 。 对 于 资讯 类 App 需 要 不 断 切 换 看 的 文章 ， 返 回 键 在 左上 角 无 疑 加 重 了 
操作 难度 。 


以 虎 嗅 为 例 ， 它 将 返回 按钮 移动 到 了 底部 左下 角 ， 结 合 拇 指 热 区 会 发 现 左下 角 的 区 域 单 手 
是 可 以 轻松 到 达 的 。 将 返回 按钮 放 在 底部 ， 大 大 地 节约 了 用 户 的 操作 时 间 。 


需要 注意 的 是 ， 尽 管 通过 分 析 得 出 返回 按钮 在 左下 角 时 单 手 更 好 操作 ， 但 是 有 时 候 习惯 真 
的 是 一 件 可 怕 的 事情 。 例 如 我 在 使 用 华西 医院 的 微 信 公 众 号 挂号 时 ， 很 少 能 够 记 住 点 击 底 
部 的 前 进 和 后 退 键 ， 每 次 想 返 回 上 一 级 ， 就 习惯 性 地 点 左上 角 ， 结 果 就 直接 退出 了 ， 如 下 
图 所 示 : 


中国 HF 7 
x 华西 六 二 医院 -在 线 问 诊 


ra a tH 


贷 生 他 


四 
出 
从 
去 
四 
2 
四 
各 
兽 


TT CTT 


微 信 公 众 号 -华西 第 二 医院 


面 对 顶 部 返回 键 单 手 不 方便 点 击 、 底 部 返回 键 又 老 是 记 不 住 的 情况 ， 怎 么 样 才能 帮助 用 户 
操作 呢 ? 当 手 机 都 是 全 面 屏 之 后 ， 就 不 需要 担心 这 个 问题 ， 你 直接 采用 全 面 屏 手势 即 可 ， 
更 方便 快捷 。 


3. 合理 利用 手势 操作 一 一 提高 用 户 操作 速度 
安 卓 的 长 按 和 iOS 的 侧 滑 编辑 大 家 都 比较 熟悉 ， 它 们 多 用 在 列表 页 的 编辑 状态 ， 用 户 长 按 
或 侧 滑 列 表 ， 操 作 按钮 就 显示 在 当前 位 置 ， 操 作 效率 比较 高 。 
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以 天 猫 购物 车 为 例 ， 长 按 和 侧 滑 唤 出 按钮 的 两 种 功能 都 支持 。 其 主要 原因 是 考虑 到 安 卓 用 
户 在 使 用 苹果 手机 时 ， 可 能 不 知道 侧 滑 的 功能 ， 因 此 在 购物 车 的 编辑 中 保留 两 种 ， 让 用 户 


能 够 更 快捷 地 操作 。 
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4. 将 操作 按钮 进行 收纳 一 一 阻碍 用 户 操作 


在 设计 时 如 果 某 个 功能 不 经 常 使 用 ， 或 者 想 阻碍 用 户 操 ， 可 以 把 操作 按钮 放 远 一 点 或 将 其 
收纳 ， 加 大 用 户 的 操作 难度 ， 如 下 图 所 示 : 
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以 大 众 点 评 详情 为 例 ， 在 右上 角 并 没有 直接 放 “ 举 报 ” 按 钮 ， 而 是 放 到 “更 多 ”按钮 之 
下 ， 一 个 原因 是 为 了 方便 后 期 的 拓展 ， 另 外 一 个 原因 就 是 增加 用 户 的 操作 难度 。 


画 重 点 


本 文 主要 分 享 了 费 茨 定律 在 Ul 界 面 中 的 应 用 ， 主 要 有 四 个 要 点 : 
( 1 ) 想 要 更 容易 点 击 到 目标 ， 就 需要 将 一 个 页 面 的 主 操作 按钮 放大 。 


(2 ) 想 要 让 用 户 快速 点 击 目 标 ， 方 便 操作 ， 可 以 将 目标 放 于 拇指 热 区 中 轻松 触 达 的 
区 域 。 

( 3 ) 想 要 让 用 户 快速 移动 时 ， 就 可 以 利用 手势 操作 ， 它 可 以 打破 距离 和 大 小 的 限制 ， 从 
而 让 用 户 可 以 快速 操作 。 


(4 ) 不 想 让 用 户 操作 的 按钮 或 不 常用 的 按钮 ， 可 以 将 其 进行 收纳 ， 加 大 用 户 操作 距离 ， 
从 而 增长 用 户 的 操作 时 间 。 


参考 资料 
设计 法 则 :Fitts "Law / 费 茨 定 律 ( 费 茨 法 则 ) http://t.cn/RAqxBrY 


威廉 立 德 威 尔 ， 克 里 蒂 娜 “ 霍 顿 ， 吉 尔 " 巴特 勒 . 通用 设计 法 则 [M]. 朱 占星 ， 薛 江 ， 译 . 
北京 : 中 央 编 译 出 版 社 ，2013 
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05 五 大 交互 心理 学 


文 / 姜 正 


马克 * 吐 温 说 过 : “ 当 你 手 里 只 有 锤子 的 时 候 ， 那 么 看 待 什么 问题 都 像 钉 子 。” 作 为 UI 
设计 师 ， 如 果 只 是 单纯 地 提高 自己 的 视觉 能 力 ， 那 么 看 待 任何 问题 都 只 是 视觉 问题 。 如 果 
是 这 样 的 话 ， 在 工作 中 很 难 去 说 服 别 人 接受 自己 的 设计 提案 ， 因 为 我 们 无 法 通过 多 维度 的 
理论 知识 来 佐证 自己 设计 的 合理 性 ， 所 以 作为 设计 师 我 们 必须 要 懂 心理 学 。 


在 日 常设 计 中 有 比较 常用 的 五 大 交互 心理 学 理论 ， 分 别 是 7 + 2 效应 、 席 克 定 律 、 莱 斯 托 夫 
效应 、 本 能 反应 、 色 彩 心 理学 。 心 理学 知识 可 以 辅助 大 家 为 自己 的 设计 建立 逻辑 严谨 的 理 
论 依据 。 


7 土 2 效 应 


1.7 土 2 效应 的 定义 

7 土 2 效应 最 早 是 在 19 世 纪 中 叶 ， 由 爱尔兰 哲学 家 威廉 。 汉密尔顿 观察 到 的 。 直 到 1956 
年 ， 美 国 心理 学 家 米 勒 ( George A. Miller ) 教授 发 表 了 一 篇 重要 的 论文 《神奇 的 数字 
7 土 2: 我 们 加 工 信 息 能 力 的 某 些 限制 》， 明 确 提出 短 时 记忆 的 容量 为 7 土 2， 即 一 般 为 7 并 
在 5~9 之 间 波 动 。 这 就 是 神奇 的 7 土 2 效应 。 


如 果 需 要 我 们 记忆 的 是 熟悉 的 字 词 或 数字 ， 这 样 短 时 记忆 还 只 能 容纳 7 个 吗 ? 例如 c-o-o- 
p-e-r-a-t-i-o-n， 这 个 字母 序列 已 经 有 11 个 字母 ， 如 果 学 过 英语 的 人 听 到 这 个 序列 很 
快 就 能 明白 这 是 个 词 ， 意 思 是 “合作 ”， 并 能 很 好 地 回忆 出 来 ， 这 不 是 违背 了 短 时 记忆 的 
“7 土 2 效应 ”了 吗 ? 不 是 的 ， 这 恰恰 是 该 效应 存在 的 另 一 个 奇特 的 现象 。 


短 时 记忆 中 的 信息 单位 “组 块 ” 本 身 具 有 神奇 的 弹性 ， 一 个 字母 是 一 个 组 块 ， 一 个 由 多 个 
字母 组 成 的 字 词 也 是 一 个 组 块 ， 甚 至 可 以 通过 一 些 方法 把 小 一 些 的 单位 联合 成 为 熟悉 的 、 
较 大 的 单位 ， 而 且 对 知识 的 熟悉 程度 还 会 对 它 产生 影响 。 
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7 十 2 效应 是 指 人 的 短期 记忆 容量 在 7 + 2 的 数量 之 间 浮 动 ， 也 就 是 说 ， 用 户 最 多 同时 
处 理 5 ~ 9 个 信息 ; 同时 我 们 也 可 以 把 一 些小 的 单位 联合 组 成 熟悉 的 、 较 大 的 单位 方 
便 记忆 。 


2.7 土 2 效应 的 作用 


1 ) 降低 识别 成 本 

通过 将 一 些小 的 单位 联合 组 成 熟悉 的 、 较 大 的 单位 方便 用 户 记 忆 。 最 常见 的 例子 就 是 电话 
号 码 的 模块 组 合 ， 通 常情 况 下 被 割裂 成 3-4-4 的 组 合 方式 ， 减 轻 用 户 的 记忆 难度 。 例 如 大 
众 点 评 的 注册 页 面 和 电话 呼叫 弹 窗 ， 都 遵循 了 7 土 2 法 则 。 


大 众 点 评 


2 ) 优化 选项 数量 
大 部 分 产品 导航 栏 的 功能 图 标 在 一 屏 之 内 都 不 会 超过 7 个 ， 这 正 是 借鉴 了 7 土 2 效应 。 


今日 头条 
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3 ) 优化 界面 布局 


在 界面 布局 的 优化 上 同样 可 以 借鉴 7+ 2 效应 。 可 以 将 首 屏 界面 的 功能 模块 切 分 成 5 个 左 
右 ， 符 合 人 们 短 时 记忆 的 容量 ， 通 过 有 效 组 织 功 能 ， 节 省 用 户 的 记忆 成 本 ， 提 高 用 户 
的 操作 效率 。 


例如 ， 支 付 宝 的 首页 设计 将 主要 功能 分 成 5 个 模块 ， 将 小 单位 的 功能 组 合成 大 单位 的 功能 
模块 ， 通 过 组 合 优化 界面 功能 的 分 布 。 用 户 可 以 先 寻 找 大 的 功能 模块 ， 再 寻找 小 的 功能 模 
块 ， 虽 然 增加 了 交互 路 径 ， 但 是 却 提高 了 用 户 的 选择 效率 和 减少 了 用 户 的 记忆 成 本 。 


惠 支付 
周 周 领 红 包 。。 直 二 。 全 人 红包 升级 ”用 光 
9 8 9 2 


席 克 定律 


1. 席 克 定律 的 定义 

席 克 定律 ， 又 称 “ 席 克 - 海 曼 定律 ”， 是 1952 年 由 席 克 和 R. 海 曼 在 选择 反应 时 研究 中 得 
到 。 研 究 表明 ， 人 的 信息 传递 时 间 与 刺激 的 平均 信息 量 之 间 呈 线性 关系 。 简 单一 点 我 们 可 
以 理解 为 ， 人 面临 越 多 的 选择 ， 所 要 消耗 的 时 间 成 本 越 高 。 
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用 数学 公式 表达 为 : RT=a+bxlogz(n)， 其 中 ，RT 表 示 反 应 时 间 ，a 表 示 跟 做 决定 无 关 
的 总 时 间 ，b 表 示 根 据 对 选项 认 知 的 处 理 时 间 实 证 衍生 出 的 常数 ，n 表 示 同 样 可 能 的 选项 
数量 。 


2. 席 克 定律 的 作用 


1 ) 提高 选择 效率 

为 了 提高 用 户 的 选择 效率 ， 我 们 需要 尽 可 能 将 多 余 的 选项 删除 ， 只 留 下 能 够 满足 用 户 需 求 
的 选项 ; 否则 用 户 会 因为 选项 过 多 而 犹 弛 不 决 ， 造 成 时 间 成 本 直线 上 升 而 导致 用 户 放弃 当 
前 操作 。 


例如 我 们 平时 的 弹 窗 设计 ， 只 为 用 户 提供 “同意 ”和 “不 同意 ”两 种 类 型 的 选项 ， 这 种 情 
况 下 用 户 可 以 根据 自己 的 实际 需求 瞬间 选择 ， 而 不 需要 在 多 个 选项 中 进行 思考 ， 消 耗 过 多 
的 时 间 和 精力 。 


确认 删除 选中 的 漫画 吗 ? 


腾讯 漫画 
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2 ) 提高 信息 获取 效率 

如 果 面 对 大 量 杂乱 的 信息 ， 我 们 需要 花 更 多 的 时 间 精 力 去 做 分 辨 信息 获取 效率 极 低 。 面 对 
这 种 情况 ， 同 样 可 以 借助 席 克 定律 去 处 理 信 息 ， 将 同类 型 或 相关 联 的 信息 进行 组 织 归 纳 ， 将 
较 多 的 信息 转变 成 较 少 的 信息 组 ， 面 对 较 少 的 信息 组 用 户 可 以 快速 地 浏览 其 中 的 信息 。 


例如 一 些 页 面 中 的 简介 ， 将 同类 或 者 相关 联 的 信息 进行 编组 处 理 ， 将 原本 较 多 的 信息 转变 
成 较 少 的 信息 组 ， 减 轻 了 用 户 原本 需要 对 全 部 信息 进行 筛选 处 理 的 工作 ， 转 变 成 快速 阅读 
信息 组 即 可 。 


例如 ， 淘 票 票 的 详情 页 通过 对 同类 型 信息 的 组 合 ， 帮 助 用 户 实 现 对 信息 进行 检索 再 组 合 认 
知 的 过 程 ， 减 少 了 用 户 的 成 本 输出 ， 提 高 了 用 户 的 阅读 效率 。 


3 ) 提高 用 户 体验 
当 用 户 在 处 理应 用 操作 的 时 候 ， 所 消耗 的 成 本 越 少 ， 心 情 自然 会 更 加 愉悦 。 
假如 在 进行 一 系列 复杂 操作 的 时 候 ， 如 果 将 所 有 选项 都 聚集 在 一 起 ， 面 对 诸多 复杂 的 选项 


会 给 用 户 造成 极 大 成 本 消耗 ， 最 终 给 用 户 造成 极 差 的 体验 。 反 之 ， 我 们 将 所 有 选项 拆 解 、 
归 类 ， 让 用 户 按照 一 定 的 步骤 在 每 一 个 界面 尽量 做 少 的 选择 ， 这 样 虽然 增加 了 交互 路 径 ， 
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但 会 营造 一 种 较为 舒适 的 用 户 体验 。 


例如 same 将 创建 频道 的 过 程 分 成 4 步 ， 每 一 步 用 户 只 需要 面 对 少量 的 选项 ， 将 用 户 的 认 知 
时 间 成 本 降 到 了 最 低 ， 为 用 户 创造 了 愉快 的 体验 。 


2 [8) 0 yt 本 四 
由 © ema 人 
Se 
© [| pe 
| 0 Er 
人 OO” sn 。 : 
a © ea 未 au 
same 
莱 斯 托 夫 效 应 
1. 莱 斯 托 夫 效应 的 定义 


莱 斯 托 夫 效应 指 的 是 相对 于 普通 事物 ， 记 住 独特 事物 的 可 能 性 更 大 。 我 们 可 以 简单 理解 
为 : 特殊 事物 才 易 被 人 牢记 。 


莱 斯 托 夫 效应 的 主要 成 因 ， 来 自 人 们 会 格外 注意 一 些 东 西里 的 某 个 特殊 目标 ， 其 具有 相对 
性 。 例 如 图 片 中 我 们 第 一 眼看 到 的 就 是 红色 的 圆 形 ， 因 为 相对 于 当前 的 环境 单个 物体 具有 
特殊 性 才 使 得 我 们 对 红色 的 圆 形 印象 深刻 。 
eg@eg@g@@@S 
@g@eg@g@@@S@ 
六 和 LA A 
O00 
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2. 莱 斯 托 夫 效 应 的 作用 


1 ) 发 生 莱 斯 托 夫 效 应 的 必要 条 件 

莱 斯 托 夫 效 应 发 生 的 必要 条 件 就 是 目标 对 象 要 与 当前 “背景 不 同 ”或 “经 验 不 同 ”， 产 生 
相对 的 比较 。 接 下 来 我 们 会 以 背景 不 同和 经 验 不 同 为 前 提 条 件 ， 分 析 一 下 莱 斯 托 夫 效 应 的 
作用 。 


2 ) 背景 不 同 

在 当前 环境 下 ， 某 个 元 素 与 周围 元 素 具有 明显 的 不 同 ， 就 发 生 了 与 “背景 不 同 ”的 情况 ， 
即 通过 将 周围 元 素 作 为 背景 来 突出 主体 元 素 。 

在 界面 设计 当中 ， 我 们 通过 区 别 设计 样式 来 突出 某 个 功能 。 例 如 在 底部 导航 栏 中 ， 我 们 为 


了 突出 其 中 的 核心 功能 ， 会 将 它 做 加 强 处 理 ， 例 如 放大 图 标 、 填 充 背景 色 等 ， 来 使 其 区 别 
于 其 他 功能 的 图 标 设计 样式 ， 如 下 图 所 示 : 


fr € © 加 = 和 (a) © [al © 
nice 转 转 


我 们 可 以 明显 看 到 nice 的 “发 布 ” 和 转 转 的 “ 卖 二 手 ”图 标 区 别 于 其 他 的 图 标 设计 ， 有 
利于 突出 核心 功能 ， 吸 引用 户 点 击 。 


3 ) 经 验 不 同 

当 现 在 所 发 生 的 事情 与 过 去 经 验 有 显著 不 同时 ， 就 会 发 生 “ 经 验 不 同 ” 的 情况 。 通 过 营 
造 与 过 去 经 验 不 同 的 场景 ， 触 发 莱 斯 托 夫 效应 ， 加 强 用 户 的 记忆 点 或 者 增强 对 用 户 的 吸 
引力 。 


例如 现在 每 年 的 电 商 购物 节 ， 界 面 设计 和 消费 场景 会 明显 区 别 于 日 常 的 电 商 界面 ， 通 过 对 
设计 风格 和 消费 场景 的 定制 化 设计 ， 加 深 用 户 的 印象 ， 同 时 扩大 了 活动 对 用 户 的 影响 力 ， 
如 下 图 所 示 : 
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末了 KE : 基 后 卫 东区 自 辕 3f86 折 | 。 更 多 


情 生 活 
© 8 pT 


1. 本 能 反应 的 定义 


本 能 反应 实际 上 是 情感 设计 的 一 种 ， 指 在 特定 的 情境 下 人 们 心理 上 和 情感 上 的 反应 ， 而 不 
是 单纯 的 美学 设计 。 


2. 本 能 反应 的 误解 
人 们 对 于 本 能 设计 时 常会 存在 一 个 误解 ， 认 为 “漂亮 美观 ”的 设计 即 是 本 能 反应 。 这 种 想 
法 是 错误 的 。 人 们 本 能 地 喜爱 美好 且 美 观 的 事物 ， 但 这 并 不 能 单一 地 定义 本 能 反应 。 


更 加 有 趣 的 是 ， 人 们 会 认为 漂亮 具有 吸引 力 的 界面 更 加 好 用 ， 并 对 这 个 观念 坚持 很 久 ， 直 
至 付出 巨大 的 成 本 ， 积 累 了 足够 的 经 验 之 后 ， 才 会 放弃 并 推翻 之 前 的 理论 。 


3. 本 能 反应 的 应 用 


喜欢 视觉 美观 的 物品 是 本 能 反应 之 一 ， 所 以 设计 中 我 们 要 尽 可 能 保持 界面 的 美观 。 营 造 出 
干净 漂亮 、 具 有 美学 设计 感 的 界面 更 容易 受到 用 户 青睐 。 例 如 在 设计 中 ， 我 们 要 选用 精美 
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的 图 片 ， 避 免 出 现 低 品 质 图 片 带 来 的 不 适 感 。 因 为 优质 的 图 片 在 构图 上 更 加 考究 、 色 调 更 
加 统一 ， 给 人 的 感觉 更 加 舒适 。 而 低 品质 的 图 片 在 构图 和 色调 上 会 显得 杂乱 无 章 ， 一 眼看 
上 去 则 是 满 满 的 劣质 感 。 


人 下 ea 35%€ PT Taon 下 ae 有 
《 ThePit x 多 < ThePit 9 


same 


2 ) 满足 情感 设计 

本 能 反应 作为 情感 化 设计 的 一 种 ， 需 要 我 们 处 处 为 用 户 着 想 ， 在 细节 上 满足 用 户 对 于 情感 
设计 的 需求 。 例 如 淘 票 票 中 的 电影 详情 页 ， 将 电影 的 预告 片 提 到 顶部 ， 用 户 可 以 直接 查看 
预告 片 ， 从 而 引起 情感 共鸣 ， 而 不 是 再 去 下 拉 寻 找 才 能 观看 。 
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1. 色彩 心理 学 的 定义 

色彩 心理 学 由 视觉 开始 ， 从 知觉 、 感 情 发 展 到 记忆 、 思 想 、 意 志 、 象 征 等 ， 其 反应 与 变化 
是 极为 复杂 的 。 色 彩 的 应 用 很 重视 因果 关系 ， 即 由 对 色彩 的 经 验 积 累 而 变 成 对 色彩 的 心理 
规范 ， 当 受到 什么 刺激 后 能 产生 什么 反应 ， 都 是 色彩 心理 学 所 要 探讨 的 内 容 。 


2. 色彩 心理 学 的 应 用 
不 同 的 色彩 在 不 同 的 国家 与 地 区 存在 着 不 同 的 含义 ， 在 这 里 我 们 不 会 展开 进行 详细 论述 ， 
核心 关注 的 是 色彩 给 用 户 带 来 什么 样 的 感受 和 作用 。 


1 ) 信息 指示 

经 过 社会 长 期 的 发 展 与 培养 ， 人 们 对 色彩 已 经 有 相对 成 熟 的 认 知 ， 色 彩 能 够 帮助 产品 来 传 
递 信 息 ， 例 如 绿色 有 “同意 ”的 意思 、 红 色 有 “反对 ”的 意思 、 橙 黄色 有 “警告 ”的 意 
思 ， 最 典型 的 案例 就 是 红绿灯 。 


在 界面 设计 中 我 们 需要 在 图 形 化 的 基础 上 结合 色彩 更 好 、 更 准确 地 传递 信息 ， 引 导 用 户 。 
例如 ， 我 们 通常 用 红色 的 按钮 表示 “反对 ”或 “删除 ”的 意思 ， 而 用 灰色 表达 的 信息 则 更 
加 隐 星 ， 如 下 图 所 示 : 
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2 ) 建立 印象 
色彩 是 能 给 人 建立 第 一 印象 的 重要 因素 ， 例 如 我 们 经 常 听 到 “这 个 界面 的 配色 很 高 级 ”， 
或 者 “这 个 界面 看 起 来 很 干净 ”等 ， 都 是 色彩 为 用 户 建立 的 第 一 印象 。 


在 色彩 的 使 用 上 ， 我 们 要 学 会 克制 ， 避 免 大 量 使 用 高 饱和 度 的 颜色 。 首 先是 因为 人 眼 对 于 
低 饱和 度 色彩 的 忍耐 度 更 高 ， 其 次 是 因为 相对 于 高 饱和 度 的 色彩 而 言 ， 低 饱和 度 的 色彩 在 
色调 上 更 加 统一 、 稳 重 ， 具 有 品质 感 。 例 如 莫 兰 迪 的 画作 : 


在 界面 设计 当中 ， 我 们 可 以 看 到 优秀 的 设计 在 色彩 的 控制 上 把 握 得 十 分 精准 ， 整 体 页 面 中 
避免 出 现 大 量 高 饱和 色彩 ， 尽 量 选用 同色 系 的 色彩 进行 设计 ， 这 样 能 有 效 保证 页 面色 调 统 
一 ， 给 予 用 户 良好 的 印象 。 例 如 Fancy 的 界面 中 统一 使 用 冷色 调 ， 搭 配 冷 灰色 ， 使 页 面 
显示 得 主 次 分 明 且 能 保证 页 面 整体 色调 的 统一 。 
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呈 中 国医 通 全 下 于 500 7 0% 


EP 


QA Whata 


EE SPUDIO PROPER i 


画 重点 


本 文 着 重 分 享 了 设计 中 常用 的 五 大 交互 心理 学 ， 这 里 再 回顾 一 下 它们 的 核心 定义 ， 以 便 大 
家 记忆 和 运用 : 


( 1 ) 7++2 效 应 是 指 人 的 短期 记忆 容量 在 7 + 2 的 数量 之 间 浮 动 ， 也 就 是 说 用 户 最 多 同时 
处 理 5 ~ 9 个 信息 ; 同时 我 们 也 可 以 把 一 些小 的 单位 联合 组 成 为 熟悉 的 、 较 大 的 单位 方便 
记忆 。 


(2 ) 席 克 定律 的 核心 意义 是 人 面临 的 选择 越 多 ， 所 要 消耗 的 时 间 成 本 越 高 。 


(3 ) 莱 斯 拓 夫 效应 指 的 是 相对 于 普通 事物 ， 人 们 记 住 独特 事物 的 可 能 性 更 大 。 我 们 可 以 
简单 理解 为 : 特殊 事物 才 易 被 人 牢记 。 需 要 注意 引发 莱 斯 托 夫 效应 的 两 个 必要 条 件 是 “ 背 
景 不 同 ” 和 “经 验 不 同 ” 


(4 ) 本 能 反应 实际 上 是 情感 设计 的 一 种 ， 指 在 特定 的 情境 下 人 们 心理 上 和 情感 上 的 反 
应 ， 而 不 是 单纯 的 美学 设计 。 


(5 ) 色彩 心理 学 是 一 种 注重 因果 关系 的 心理 学 说 ， 侧 重 于 观看 色彩 之 后 产生 的 感受 
于 情感 设计 中 的 一 种 。 
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06 尼尔森 十 大 可 用 性 原则 


文 / 付 铂 一 


尼尔森 十 大 可 用 性 原则 是 十 分 基础 且 重 要 的 原则 ， 如 何 正 确 将 其 结合 到 实际 运用 中 才 是 关 
键 。 接 下 来 我 会 将 每 一 个 原则 和 现在 的 移动 端 产品 结合 进行 分 析 ， 希 望 读 者 可 以 更 深入 地 
记 住 它们 。 


尼尔森 是 谁 


尼尔森 ( Jakob Nielsen ) 是 一 位 人 机 交互 学 博士 ， 于 1995 年 1 月 1 日 发 表 了 “十 大 可 用 
性 原则 ”。1995 年 以 来 ， 他 通过 自己 的 Alertbox 邮件 列表 以 及 useit.com 网 站 ， 向 成 干 
上 万 的 网 页 设计 师 传 授 网 页 易 用 性 方面 的 知识 。 尽 管 他 的 一 些 观点 可 能 带 来 争议 ， 但 至 少 
在 网 页 设计 师 眼 中 ， 他 是 网 页 易 用 性 领域 的 顶尖 领袖 。 


十 大 可 用 性 原则 解析 与 案例 


1. 状态 可 见 性 原则 


用 户 在 手机 上 的 任何 操作 ， 如 上 下 滑动 刷新 、 点 击 跳 转 页 面 等 都 应 该 即时 给 出 反馈 。“ 即 
时 ”是 指 页 面 响应 时 间 小 于 用 户 能 忍受 的 等 待 时 间 。 


案例 一 
如 下 图 所 示 ， 微 信 中 点 赞 的 样式 ， 手 指 触 碰 按钮 时 ， 颜 色 加 深 ， 通 过 改变 颜色 告知 用 户 目 
前 按钮 的 状态 已 被 激活 。 


Exe PB 上 2 74 上 3 Ti 
《发 现 朋友 转 全 《发 现 朋友 圈 个 
并 Px | -li 


国 wensear :ss 国 .s: :ee 


Er “EE - 
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案例 二 


如 下 图 所 示 ， 网 易 云 音乐 中 ， 当 我 们 点 击 “+ 关 注 ” 时 ， 界 面 中 关注 标签 的 状态 会 及 时 更 
新 为 “V” 展 示 给 用 户 ， 通 过 点 击 后 的 形状 改变 告知 用 户 操作 已 完成 。 这 种 状态 可 见 性 可 
以 清晰 地 让 用 户 感受 到 页 面 即时 给 出 的 反馈 。 


ERNE 9748 ED 大 的 分 下: © 


案例 三 
如 下 图 所 示 ， 当 我 们 下 拉 界 面 刷新 时 ， 界 面 上 方 会 出 现 动画 加 载 的 效果 。 这 种 状态 可 见 性 
是 最 明显 的 ， 可 以 清晰 地 让 用 户 感 受到 页 面 即 时 给 出 的 反馈 。 


马蜂 窝 火球 买 手 


上 面 是 关于 状态 可 见 性 原则 在 产品 中 的 常见 案例 ， 当 然 除了 这 三 个 还 有 很 多 ， 例 如 点 击 列 
表 、 界 面 模 滑 时 等 。 我 们 在 设计 实际 界面 中 ， 一 定 要 谨 记 设计 出 对 应 的 可 见 状态 ， 避 免 用 
户 使 用 时 以 为 操作 无 效 。 


2. 环境 贴切 原则 


简单 地 说 就 是 产品 设计 符合 真实 世界 中 用 户 的 使 用 习惯 和 思考 逻辑 ， 尽 可 能 贴近 用 户 所 在 
的 环境 (年 龄 、 学 历 、 文 化 、 时 代 背 景 等 )， 而 不 要 使 用 生僻 的 语言 ， 应 该 使 用 易 懂 和 约定 
俗 成 的 表达 。 


案例 一 


DaDaBaby 和 TutorABC 同 是 学 英语 的 产品 ， 由 于 产品 所 面向 用 户 的 年 龄 、 学 历 、 文 化 不 
同 ， 界 面 的 风格 也 会 发 生 改变 ， 如 下 图 所 示 : 
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DaDaBaby TutorABC 


DaDaBaby 是 针对 幼儿 学 英语 ， 所 以 界面 风格 活泼 可 爱 ， 颜 色 鲜 艳 ; 而 TutorABC 是 针对 
成 年 人 学 英语 ， 界 面 简 洁 、 严 肃 。 这 就 是 产品 风格 与 环境 贴切 。 


案例 二 
优酷 为 视频 类 产品 ， 饿 了 么 为 外 卖 类 产品 ， 虽 然 它们 的 定位 不 同 ， 但 是 在 世界 杯 期 间 ， 都 
替换 了 界面 的 皮肤 ， 如 下 图 所 示 : 


2018 供 写 所 芭 芝 入 
ye 


优酷 饿 了 么 


例如 ， 优 柄 底部 标签 栏 的 图 标 和 饿 了 么 中 间 分 类 入 口 的 图 标 都 有 所 改变 。 这 就 是 环境 贴切 原则 
的 体现 。 在 特殊 的 时 间 里 ， 我 们 也 可 以 通过 改变 界面 的 皮肤 增加 产品 与 当下 环境 的 贴切 性 。 
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上 面 是 关于 环境 贴切 原则 的 案例 。 我 们 在 设计 界面 时 ， 必 须知 道 产品 的 使 用 人 群 、 产 品 的 
类 型 ， 例 如 商务 类 产品 和 娱乐 类 产品 设计 出 来 就 会 截然 不 同 ， 这 是 产品 风格 的 环境 贴切 。 
除了 产品 大 方向 要 贴切 ， 我 们 也 可 通过 一 些 特殊 的 节日 改变 产品 的 皮肤 ， 让 用 户 在 短 时 间 
内 加 强 和 产品 的 共鸣 。 


3. 撤销 重 做 原则 
给 用 户 更 多 自主 操作 权 ， 当 用 户 在 使 用 产品 过 程 中 产生 错误 的 操作 时 ， 应 提供 更 多 的 解决 
方案 ， 例 如 撤销 或 重 做 等 功能 。 


案例 
微 信 中 我 们 需要 考虑 到 用 户 的 出 错 情况 ， 例 如 在 用 微 信 拍 照 时 ， 有 如 下 功能 : 


如 果 效 果 不 够 理想 就 可 选择 左 侧 的 撤销 按钮 ， 在 未 发 送 情况 下 进行 重新 拍照 ; 另外 一 种 情 
况 就 是 发 送 后 也 可 以 通过 长 按 当前 发 送 的 图 片 ， 在 出 现 的 功能 菜单 中 选择 撤回 。 


上 面 是 撤回 重 做 原则 的 案例 ， 我 们 在 做 界面 时 要 根据 产品 的 不 同 阶段 ， 给 用 户 添加 该 功能 ， 
如 果 是 一 次 性 考试 类 型 的 产品 就 不 适合 加 入 该 功能 ， 需 要 用 户 填写 时 更 加 小 心 谨慎 。 


4. 一 致 性 原则 


产品 的 功能 操作 、 模 块 样式 、 页 面 布 局 、 信 息 提示 、 颜 色 运用 应 该 一 致 ， 避 免 用 户 突然 跳 
后 感觉 在 使 用 另 一 个 产品 的 错觉 ， 影 响 用 户 对 产品 的 整体 体验 。 


婚 
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案例 一 
鳌 鱼 记 账 中 ， 从 产品 的 logo 到 闪 屏 界面 再 到 里 面 的 主页 界面 、 图 标 、 按 钮 等 颜色 都 用 的 是 
统一 的 黄色 作为 主 色 ， 加 深 用 户 对 品牌 色 的 记忆 ， 如 下 图 所 示 : 


案例 二 

产品 或 者 系统 内 部 的 交互 方式 应 该 一 致 ， 这 会 让 用 户 对 产品 产生 信任 感 和 控制 感 。 例 如 ， 
下 图 中 的 微 信 会 遵循 不 同系 统 中 的 交互 方式 ，iOS 系 统 中 删除 列表 的 交互 方式 是 向 左 滑 
动 ， 而 在 Android 系 统 中 则 是 长 按 需要 删除 的 列表 。 这 就 是 遵循 已 有 的 系统 交互 方式 ， 保 


证 交互 的 一 致 性 。 
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一 致 性 原则 除了 上 面 说 的 还 有 语言 的 统一 、 功 能 的 统一 等 。 对 于 设计 师 来 说 ， 设 计 上 的 统 
一 是 必须 要 注意 的 ， 但 是 我 们 往往 在 追求 视觉 效果 的 时 候 却 忽略 了 这 些 细节 的 问题 。 


5. 防 错 原则 


比 出 现 错误 信息 才 提 示 更 好 的 ， 是 通过 更 用 心 的 设计 来 防止 这 类 问题 发 生 。 在 用 户 选择 动 
作 发 生 之 前 ， 就 要 防止 用 户 混淆 或 者 错误 选择 。 对 产品 进行 不 同 的 操作 、 重 组 或 特别 安 


排 ， 防 止 用 户 出 错 。 


案例 


如 下 图 马蜂 窝 的 选择 日 期 功能 ， 为 了 防止 用 户 选择 错误 ， 把 当天 日 期 之 前 的 日 期 都 设 定 为 
不 可 选择 。 再 例如 很 多 表单 页 ， 当 内 容 信息 未 填写 完 时 ， 按 钮 为 灰色 不 可 点 击 的 样式 ， 避 


免 用 户 在 未 填写 完 之 前 就 点 击 提交 按钮 。 
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6. 易 取 原 则 


尽量 减少 用 户 对 操作 目标 的 记忆 负荷 ， 动 作 和 选项 都 应 该 是 可 见 的 。 用 户 不 必 记 住 一 个 页 


面 到 另 一 个 页 面 的 信息 ， 系 统 的 使 用 说 明 应 该 是 可 见 的 或 者 是 容易 获取 的 。 


案例 


为 了 让 大 家 更 好 地 理解 什么 是 易 取 原则 ， 我 对 京东 的 弹 窗 界面 做 了 些 调 整 ， 如 下 


图 所 示 : 
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京东 到 家 


京东 到 家 发 现 新 版 本 后 会 弹 窗 提示 ， 在 弹 窗 中 告知 用 户 需 要 通过 去 App Store 进 行 操作 更 
新 ， 点 击 确定 后 如 果 返 回首 页 ， 导 致 用 户 需 要 记 住 路 径 和 方法 ， 然 后 再 去 操作 ， 流 程 复杂 


的 话 ， 用 户 需 要 反复 切换 且 确 认 。 


正确 的 做 法 是 ， 当 选择 确定 后 会 自己 跳 到 App Store 的 更 新 界面 ， 用 户 只 要 点 击 更 新 即 
可 ， 不 需要 记录 整个 过 程 。 当 更 新 完成 后 ，App Store 中 的 更 新 按钮 变 成 打开 按钮 ， 可 以 


直接 打开 京东 到 家 的 首页 ， 这 个 流程 不 需要 用 户 提取 任何 记忆 。 
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7. 灵活 高 效 原则 
产品 中 中 级 用 户 的 数量 远 高 于 初级 和 高 级 用 户 数量 。 要 为 大 多 数 用 户 设计 ， 不 要 低估 ， 也 
不 可 轻视 ， 保 持 灵 活 高 效 。 


说 明 

这 个 原则 就 是 告诉 我 们 每 个 产品 针对 的 用 户 不 可 能 是 所 有 和 群体， 都 会 有 自己 的 适用 人 群 ， 
我 们 需要 针对 主要 的 用 户 去 设计 ， 而 不 能 仅仅 为 了 一 小 部 分 用 户 进行 极端 设计 ， 满 足 大 部 
分 用 户 的 使 用 需求 才 是 最 重要 的 。 


8. 易 扫 原 则 


互联 网 用 户 浏览 的 动作 不 是 读 ， 不 是 看 ， 而 是 扫 。 易 扫 意 味 着 突出 重点 ， 弱 化 和 剔除 无 关 
信息 。 


案例 

很 多 设计 师 对 于 纯 文字 的 界面 总 是 不 悄 一 顾 ， 感 觉 没有 什么 难度 ， 也 不 需要 什么 设计 。 那 
么 我 在 左 侧 放置 了 一 篇 无 设计 的 只 是 文字 排列 的 一 个 界面 ， 右 侧 则 是 网 易 新 闻 的 设计 界 
面 ， 如 下 图 所 示 : 


Co 7 oo Ti 
< CD) < Conn) 
86 平 方 米 的 简 美 风格 小 户型 设 86 平 方 米 的 简 美 风格 小 户型 设 
计 ， 格 局 不 好 就 只 能 靠 装修 来 计 ， 格 局 不 好 就 只 能 靠 装 修 来 
改善 了 改善 了 
位 ee es 
这 套 小 户型 的 面积 仅 有 86 平 方 米 , 小 两 居 会 时 ED 


的 格局 是 因为 户型 本 身 的 规划 不 好 , 公共 
区 域 大 ,而 卧室 就 比较 小 , 但 是 格局 不 能 
改 ,就 只 能 从 装修 设计 这 方面 来 改善 这 个 
问题 。 公共 区 域 的 空间 估计 有 35 平 米 左 
右 ， 所 以 只 能 是 把 客厅 和 餐厅 整合 在 公共 
区 域 这 块 。 


这 套 小 户型 的 面积 仅 有 86 平 方 米 , 小 两 居 
的 格局 是 因为 户型 本 身 的 规划 不 好 ,公共 
区 域 大 ， 而 卧室 就 比较 小 , 但 是 格局 不 能 
改 , 就 只 能 从 装修 设计 这 方面 来 改善 这 个 
问题 。 公共 区 域 的 空间 估计 有 35 平 米 左 
右 , 所 以 只 能 是 把 客厅 和 和 餐厅 整合 在 公共 


整 休 混 并 风格 的 改造 ,装修 后 的 效果 非常 

的 实用 ,而 且 颜 人 高 人 
整体 湿 拱 风格 的 改造 ， 装 修 后 的 效果 非常 
的 实用 , 而 且 颜 值 高 ! 

了 日 家 台 会 ' 外 


网 易 新 闻 
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可 以 明显 看 出 ， 左 侧 的 界面 找 不 到 重点 内 容 和 标题 ， 没 有 主 次 。 而 右 侧 的 界面 通过 文字 变 
化 、 段 与 段 的 间距 等 设计 手段 让 用 户 在 读 文 时 可 以 很 容易 地 扫 视 通 篇 的 主要 内 容 。 


9. 容错 原则 


帮助 用 户 从 错误 中 恢复 ， 将 损失 降 到 最 低 。 如 果 无 法 自动 挽回 ， 则 提供 详尽 的 说 明文 字 和 
指导 方向 ， 而 非 代码 如 404 等 。 


案例 


为 了 避免 造成 用 户 的 损失 ， 我 们 需要 在 重要 操作 中 给 出 合理 的 文字 说 明和 指导 ， 如 下 图 
所 示 : 


扣除 备忘录 
所 杂 信芳 姑 区 到“ 归 过 几 辽 - 广 件 
天 。30 天 后 将 未 久 时 
好 


有 道 云 笔记 备忘录 


例如 有 道 云 笔 记 中 告诉 用 户 “ 文 件 删除 后 将 无 法 恢复 ”， 就 给 用 户 一 次 思考 的 时 间 ， 
避免 一 时 误 删 ， 造 成 损失 。iPhone 自 带 的 备忘录 给 用 户 的 容错 空间 更 大 ， 删 除 后 可 以 
在 30 天 内 找 回 。 另 外 ， 对 于 容错 程度 的 大 小 还 是 取决 于 产品 用 户 群 的 需要 ， 并 不 是 越 
大 越 好 。 


10. 人 性 化 帮助 原则 
帮助 性 提示 最 好 的 方式 是 ，OD 无 需 提示 ; @ 一 次 性 提示 ; @ 常 驻 提示 ; @ 帮 助 文档 。 
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案例 

对 于 初次 使 用 产品 的 用 户 来 说 ， 可 能 不 知道 表单 里 面 需要 填写 什么 ， 如 果 没有 帮助 性 文档 
的 提示 ， 很 容易 出 现 错误 。 因 此 我 们 可 以 增加 一 些 填 写 前 的 文档 帮助 ， 例 如 每 日 优 鲜 ， 如 
下 图 所 示 : 


1 Tm 1 - 
斯 增收 后 地 址 附近 ”大 城 ” 铀 课室 


下 莉 人 
于 人 中 可 
EM 
必 扣 地 址 
性 8 网 


地址 关 型 


每 日 优 鲜 悦动 


在 刚 下 载 一 款 产 品 时 ， 最 好 提供 帮助 界面 ， 让 用 户 在 最 短 的 时 间 内 了 解 产 品 的 主要 功能 及 
用 法 ， 如 悦动 的 截图 。 


如 果 在 使 用 产品 时 存在 一 些 使 用 户 困 惑 的 敏感 信息 时 ， 我 们 需要 对 其 进行 提醒 说 明 ， 甚 至 
要 做 出 教学 类 的 界面 进行 辅助 。 


画 重 点 
原则 1: 状态 可 见 性 原则 ， 用 户 在 手机 上 的 任何 操作 ， 如 上 下 滑动 刷新 、 点 击 跳 转 页 面 等 
都 应 该 即时 给 出 反馈 。“ 即 时 ”是 指 页 面 响应 时 间 小 于 用 户 能 忍受 的 等 待 时 间 。 


原则 2: 环境 贴切 原则 ， 简 单 地 说 就 是 产品 设计 符合 真实 世界 中 用 户 的 使 用 习惯 和 思考 软 
辑 ， 尽 可 能 贴近 用 户 所 在 的 环境 (年 龄 、 学 历 、 文 化 、 时 代 背 景 )， 而 不 要 使 用 生僻 的 语 
言 ， 应 该 使 用 易 懂 和 约定 俗 成 的 表达 。 


原则 3 : 撤销 重 做 原则 ， 给 用 户 更 多 自主 操作 权 ， 当 用 户 在 使 用 产品 过 程 中 产生 错误 的 操 
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作 时 ， 应 提供 更 多 的 解决 方案 ， 例 如 撤销 或 重 做 等 功能 。 


原则 4: 一 致 性 原则 ， 产 品 的 功能 操作 、 模 块 样式 、 页 面 布 局 、 信 息 提示 、 颜 色 运 用 应 该 
一 致 ， 避 免 用 户 突然 跳 转 后 感觉 在 使 用 另 一 个 产品 的 错觉 ， 影 响 用户 对 产品 的 整体 体验 。 
原则 5: 放 错 原则 ， 比 出 现 错误 信息 才 提 示 更 好 的 ， 是 通过 更 用 心 的 设计 来 防止 这 类 问题 
发 生 。 在 用 户 选择 动作 发 生 之 前 ， 就 要 防止 用 户 混淆 或 者 错误 选择 。 对 产品 进行 不 同 的 操 
作 、 重 组 或 特别 安排 ， 防 止 用 户 出 错 。 

原则 6: 易 取 原 则 ， 尽 量 减少 用 户 对 操作 目标 的 记忆 负荷 ， 动 作 和 选项 都 应 该 是 可 见 的 。 
用 户 不 必 记 住 一 个 页 面 到 另 一 个 页 面 的 信息 ， 系 统 的 使 用 说 明 应 该 是 可 见 的 或 者 是 容易 获 
取 的 。 


原则 7: 灵活 高 效 原则 ， 中 级 用 户 的 数量 远 高 于 初级 和 高 级 用 户 数量 。 为 大 多 数 用 户 设 
计 ， 不 要 低估 ， 也 不 可 轻视 ， 保 持 灵活 高 效 。 


原则 8: 易 扫 原则 ， 互 联网 用 户 浏览 的 动作 不 是 读 ， 不 是 看 ， 而 是 扫 。 易 扫 意 味 着 突出 重 
点 ， 弱 化 和 剔除 无 关 信 息 。 


原则 9: 容错 原则 ， 帮 助 用 户 从 错误 中 恢复 ， 将 损失 降 到 最 低 。 如 果 无 法 自动 挽回 ， 则 提 
供 详尽 的 说 明文 字 和 指导 方向 ， 而 非 代码 如 404 等 。 


原则 10: 人 性 化 帮助 原则 ， 帮 助 性 提示 最 好 的 方式 是 : QD 无 需 提示 ; @ 一 次 性 提示 ; @ 常 
驻 提示 ; @ 帮 助 文档 。 


十 大 原则 很 容易 记 住 ， 但 我 们 的 目的 绝对 不 是 简单 地 记 住 它 ， 在 实际 设计 中 有 效 运用 才 是 
关键 。 无 论 是 产品 、 交 互 还 是 设计 ， 如 果 拿 捏 不 准 都 可 以 回想 一 下 这 十 个 原则 ， 也 许 会 有 
很 大 的 帮助 。 


参考 资料 
拿 不 定 设 计 ? 让 经 典 的 尼尔森 十 大 可 用 性 原则 帮 你 ! http://t.cn/Efio7tQ 
用 超 多 案例 ， 带 你 全 面 看 懂 尼 尔 森 十 大 可 用 性 原则 ! ”http:Wt.cm/RrlrQUB 


以 简 书 为 案例 讲述 「 尼尔森 十 大 可 用 性 原则 | http://t.cn/Rhdac07 
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07 ”拟人 形 法 则 


文 / 吴 荫 


拟人 形 法 则 指 的 是 把 事物 人 格 化 ， 赋 予 事物 和 人 一 样 的 特性 ， 和 人 一 样 有 感情 、 有 声音 、 
有 动作 。 拟 人 能 更 加 生动 地 表达 出 事物 的 特点 ， 让 人 感同身受 。 而 现在 拟人 在 设计 上 的 运 
用 也 日 益 广泛 ， 把 抽象 的 、 用 户 不 熟悉 的 元 素 拟 人 化 ， 能 让 用 户 第 一 眼 就 知道 你 这 个 产品 
是 什么 ， 引 起 他 们 的 关注 ， 从 而 建立 对 产品 的 情感 共鸣 。 


模拟 人 的 形态 


最 基础 的 拟人 化 就 是 模拟 人 的 外 在 形态 一 一 高 矮 胖 瘦 等 ， 把 自己 的 产品 和 人 的 外 在 形态 建 
立 联系 。 在 产品 界面 中 ， 我 们 经 常会 用 拟人 化 的 卡通 形象 来 烘托 页 面 的 氛围 ， 胖 胖 圆 圆 的 
圆润 造型 可 以 营造 轻松 、 活 泼 的 联想 。 


seeo 中 国 W 动 46 F441 CC@7930N0D 


《 京东 小 金库 :里 


你 已 完成 首次 体验 金 投 次 


京东 
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模拟 人 的 动作 


肢体 语言 往往 比 外 在 形态 更 生动 ， 而 且 通 用 性 更 强 。 如 下 图 哗 哩 哗 哩 的 登录 页 ， 当 用 户 输 
入 密码 的 时 候 ， 页 面 上 方 两 个 卡通 人 物 会 用 手 后 住 自己 的 眼 。 


5 NB We 为 Bi $ SS 


571602094 


哗 哩 哗 哩 
其 实 这 来 源 于 生活 中 的 场景 ， 当 你 在 银行 取款 输入 密码 的 时 候 自己 会 用 手 挡住 ， 别 人 也 会 


自觉 回避 。 界 面 中 运用 到 这 一 点 ， 用 户 看 到 也 会 觉得 很 熟悉 ， 会 心 一 笑 ， 对 产品 的 好 感度 
瞬间 倍增 。 


模拟 人 的 声音 


人 的 声音 和 动作 一 样 ， 都 能 在 短 时 间 内 引起 用 户 的 共鸣 。 在 产品 中 植 入 一 段 有 特点 的 音 
频 ， 也 是 一 个 不 错 的 选择 。 这 在 游戏 类 App 里 面 最 常见 ， 在 小 孩子 玩 的 益 智 类 游戏 中 也 
会 经 常 出 现 。 例 如 开心 消 消 乐 ， 错 误 的 时 候 配 合 着 抖动 会 发 出 “ 啊 哦 ” 的 声音 ， 有 一 种 
忱 惜 的 意思 ， 鼓 励 用 户 再 接 再 房 。 
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加 六 语 各 全 让 反馈 信息 更 加 明确 ， 因 为 音频 本 身 就 带 有 情感 ， 正 确 、 错 误 、 开 心 与 否 都 


村民 
1 


开心 消 消 乐 
模拟 人 的 行为 


人 是 一 个 很 奇怪 的 物种 ， 大 多 数 人 都 认为 自己 做 一 个 决定 的 时 候 ， 是 完全 出 于 内 心 的 选 
择 ， 绝 对 不 会 受 他 人 影响 。 但 其 实 人 作为 一 个 社会 性 物种 ， 一 言 一 行 都 会 受到 周围 环境 以 
及 习惯 的 影响 。 


. 行为 会 受 环境 的 影响 


1) 从 众 

社会 心理 学 里 讲 过 一 个 现象 : 从 众 心理 ， 指 的 是 个 人 的 行为 会 受到 外 界 人 群 行为 的 影响 ， 
从 而 在 自己 的 知觉 、 判 断 、 认 识 上 表现 出 符合 公众 舆论 或 与 大 多 数 人 相似 的 行为 方式 。 从 
众 心理 是 部 分 个 体 普遍 所 有 的 心理 现象 。 


其 实在 很 多 产品 的 设计 上 ， 都 有 在 利用 用 户 的 从 众 心理 。 例 如 把 产品 的 销量 、 评 价 数 外 漏 
展示 得 特别 明显 ， 仿 佛 在 告诉 用 户 我 这 个 东西 很 受 欢 迎 ， 很 多 人 都 买 了 ， 好 评 也 很 高 ， 那 
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么 自然 而 然 用 户 就 会 对 这 个 产品 多 看 一 眼 
宝 购物 的 时 候 ， 是 不 择 销量 最 高 
理 一 一 大 家 都 买 的 应 该 差 不 到 哪里 去 。 


时 的 公 } 
是 总 会 


无 SIM 卡 全 21:03 了 了 者 14%E 
《< 面膜 回 
全 部 ”天 猫 ”店铺 ”淘宝 经 验 。 ” 挑 尖 货 
综合 ¥ 


ED WIS 水 润 隐形 面膜 补水 保湿 
玻 去 山头 收缩 毛孔 


， 而 且 最 后 很 有 可 能 也 会 购买 。 回 想 自己 在 淘 
、 好 评 最 多 的 商品 呢 ? 这 其 实 就 是 一 种 从 众 心 


4 中 国 移动 令 


15:25 160%m 
< 
宝贝 9 评价 详情 推荐 
宝贝 评价 (9693) 查看 全 部 > 
保湿 溢 泣 (63) 实惠 (36) 正品 (25) 


已 经 第 二 次 回 购 了 ! 在 评价 面 腊 还 算 不 错 的 呢 . 


淘宝 


2 ) 攀比 


攀比 也 会 激励 人 去 做 一 件 事 情 。 各 种 App 里 都 会 有 排行 榜 ， 也 是 利用 用 户 的 这 一 心理 。 当 
看 到 自己 的 偶像 排名 较 低 时 ， 用 户 会 想 通过 各 种 打 榜 活动 去 让 自己 的 偶像 排名 上 升 。 


今日 奖励 排行 榜 
a 我 000 
并 
® 四 50.00 
学 
@ 50.00 
» 
Ce 50.00 
[ey Me oi 
网 ns e000 
京东 金融 


无 SMW 卡 合 


《 


2108 


采 讯 视频 doki 星 想 榜 


# 12%€E 


2 梁 洁 
3 沿 战 


@ 
今 4 吴 全 


腾讯 视频 
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3 ) 奖励 

奖励 算是 影响 人 行为 的 最 快 的 一 种 方式 了 ， 新 手 注册 、 邀 请 好 友 、 每 日 签到 等 各 种 奖励 方 
式 ， 都 在 激励 用 户 。 奖 励 方式 按照 目的 可 划分 为 拉 新 和 留存 ， 不 同 的 目的 所 采取 的 奖励 方 
式 也 不 一 样 。 当 用 户 不 熟悉 你 的 产品 的 时 候 ， 通 用 奖励 是 一 种 很 好 的 方式 。 通 用 奖励 指 的 
是 你 所 奖励 的 东西 不 仅仅 局 限 在 你 的 平台 使 用 ， 而 最 常见 、 最 能 被 用 户 接受 的 就 是 现金 
了 ， 这 也 是 拉 新 最 常用 的 一 种 方式 。 


开 福 袋 就 给 钱 99 元 快 来 抢 
囊 , 网 , 赔 . 匡 


每 邀请 1 位 好 友 


=| 


人 体 吕 元 


额外 6% 理 财 收益 特权 


京东 金融 


2. 行为 会 受 习 惯 的 影响 

俗话 说 三 天 能 养 成 一 个 习惯 ， 而 且 习 惯 养 成 后 很 难 改变 ， 每 个 人 都 会 有 自己 的 一 点 小 癖 
好 。 一 个 吃素 的 人 ， 你 再 怎么 跟 他 宣传 肉食 多 么 好 吃 也 是 徒劳 无 功 ， 而 一 个 天 天 吃 肉 的 人 
让 他 改 吃素 ， 别 人 也 轻易 接受 不 了 。 


虽说 每 个 人 的 习惯 各 有 不 同 ， 但 其 中 还 是 有 些 共 性 的 ， 例 如 按钮 、 卡 片 、 头 像 给 人 的 感觉 
就 是 可 点 击 的 。 
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天 SM 全 2 #12%E 


冷 兵器 的 奈 力 


Blxxx** a 
人 和 


呈 理 看 太 看 过 


威 为 巫师 ， 持 免费 电影 票 
国史 GD 


简介 EE 评 di EE 
在 《神奇 动 物 在 寺 里 》 第 一 部 的 结尾 ， 组 特 , 斯 卡 今 6 主要 
基 逢 | 埃 过 .党 谓 梅 轧 Eddie Redmayne 号 ) 协助 作业 小 帮手 


美国 隐 法 国会 ， 将 强大 的 黑 下 大 基 各 特 -全 展开 


淘 票 票 App Store 


EN 拍 作 业 -的 了 一 昌吉 
国 多 地 Ba 


所 以 在 做 设计 的 时 候 ， 我 们 可 以 去 找 找 自己 的 目标 人 群 有 没有 一 些 共 有 的 行为 习惯 ， 针 对 
这 个 共有 的 习惯 去 做 一 些 针 对 性 的 设计 。 


拟人 形 法 则 并 不 仅仅 只 是 模拟 人 的 外 在 形态 、 动 作 、 语 言 等 ， 更 深层 次 的 是 模拟 人 的 情 
感 。 人 的 形态 、 动 作 、 语 言 能 够 影响 外 界 对 他 的 认 知 ， 例 如 看 到 全 身 都 是 妖魔 鬼怪 纹身 的 
人 会 不 由 自主 地 害怕 、 经 常 笑 的 人 会 给 人 面 善 的 感觉 、 同 一 句 话 用 不 同 的 语气 表达 意思 可 
以 截然 相反 …… 


这 些 认 知 都 是 我 们 主观 上 所 认为 的 ， 拟 人 形 模拟 的 其 实 是 一 种 内 在 情感 ， 一 种 人 们 对 外 界 
的 主观 认 知 ， 是 人 对 现实 世界 的 看 法 ， 而 拟人 的 “人 ”只 是 起 到 一 个 媒介 作用 。 


模拟 人 的 情感 


我 们 这 个 时 代 的 人 在 精神 的 诉求 上 比 祖辈 高 太 多 了 ， 这 就 要 求 设计 师 除 了 满足 功能 需求 ， 
也 要 去 关注 人 们 的 情感 需求 。 人 性 化 的 设计 已 经 成 为 这 个 时 代 的 主流 ， 想 用 户 所 想 ， 为 他 
们 提供 他 们 想 要 的 服务 ， 或 者 说 让 我 们 想 推 的 服务 被 他 们 所 喜欢 。 


把 人 们 对 现实 世界 的 看 法 嫁接 到 产品 设计 上 ， 投 其 所 好 ， 就 能 让 自己 的 产品 更 容易 被 大 众 
所 接受 。 这 里 说 的 “好 ” 指 的 是 认 知 习 惯 ， 是 每 个 人 对 这 个 世界 存在 的 一 些 看 法 ， 有 客 
观 存在 的 ， 也 有 主观 的 ， 而 且 这 个 看 法 也 会 随 着 时 间 的 变化 而 变化 。 
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1. 约定 俗 成 
有 一 些 认 知 习惯 ， 是 人 们 在 社会 中 自然 而 然 形 成 的 。 如 红 橙 色 系 的 颜色 能 够 给 人 带 来 食 
欲 ， 因 为 生活 中 的 食物 大 多 都 是 这 个 色 系 的 ， 人 们 就 形成 了 固有 的 认 知 。 


当 我 们 在 实际 工作 中 运用 拟人 形 法 则 的 时 候 ， 要 干 万 注意 这 一 点 ， 不 要 盲目 去 做 跟 用 户 认 
知 相悖 的 设计 。 例 如 下 图 正确 错误 的 标识 ， 在 用 户 的 认 知 层面 里 ， 正 确 是 绿色 的 ， 错 误 是 
红色 的 ， 所 以 在 做 设计 时 就 不 能 把 它 反 过 来 了 。 


而 把 用 户 固 有 的 认 知 习惯 和 产品 相 结 合 的 一 个 最 常用 、 最 快捷 的 方式 就 是 使 用 动物 形象 ， 
自然 界 中 绝 大 多 数 动物 在 用 户 的 心里 都 有 固有 的 印象 ， 加 上 动物 大 多 和 我 们 人 一 样 ， 有 手 
有 脚 ， 也 更 好 延展 。 


例如 印象 笔记 的 大 象 ， 印 象 笔记 作为 一 款 多 功能 笔记 类 应 用 ， 对 用 户 来 说 最 重要 的 就 是 存 
储 功能 ， 所 有 记录 的 内 容 都 不 会 丢失 。 而 正好 大 象 属于 记忆 力 绝 佳 的 动物 ， 与 产品 想 要 传 
达 的 理念 完美 契合 。 


辆 印象 笔记 


再 例如 美 团 外 卖 的 袋鼠 ， 袋 鼠 在 哺乳 动物 里 是 跑 得 最 快 的， 而 美 团 想 向 用 户 传递 “ 美 团 外 
卖 ， 送 啥 都 快 ” 的 品牌 理念 ， 那 么 袋鼠 就 很 符合 这 一 理念 。 
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美 团 外 卖 


美 团 外 卖 送 啥 都 快 


2. 现实 世界 
当 约 定 俗 成 的 习惯 无 法 与 自己 的 产品 结合 得 较 好 的 时 候 ， 我 们 也 可 以 从 现实 世界 中 找 灵 
感 ， 模 拟 现实 世界 的 场景 ， 让 用 户 对 界面 有 一 种 天 然 的 熟悉 感 。 


1 ) 引导 性 界面 

模拟 现实 世界 中 超市 、 图 书馆 、 机 场 等 地 的 指示 牌 。 

在 现实 世界 我 们 到 达 一 个 陌生 的 地 方 首先 会 去 看 的 就 了 

是 指示 信息 ， 每 一 层 有 什么 ， 要 去 的 地 方 在 哪里 。 ees 一方 | 
问讯、 银 ks \ de 

而 在 界面 中 也 是 一 样 ， 用 户 第 一 次 进入 ， 对 于 页 面 功 。 直到 ba 

能 的 放置 不 是 很 清楚 ， 这 就 需要 一 些 提示 信息 ， 特 别 、 纪 归 - 其 遇 4Y 

1 ~ Hestauantsnops | 
是 你 的 交互 比较 特殊 ， 用 户 还 没 养 成 习惯 时 。 


提 内 借款 本人 双方 下 于 才 田 共 同 俯 务 , 扫 于 。。 工 加 
给 等 到 了 ! 幸 所 这 30 多 年 仙姑 辣 [doge] ea 
- 


京东 金融 支付 宝 
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2 ) 界面 与 用 户 互 动 ， 即 时 给 予 反馈 

在 现实 世界 里 ， 我 们 和 别人 交谈 的 时 候 都 希望 是 一 问 一 答 式 的 ， 更 好 的 是 我 问 一 句 别人 能 把 
我 想 知道 的 都 告诉 我 。 而 在 App 中 ， 我 们 也 需要 营造 这 样 一 种 氛围 ， 在 用 户 进行 一 个 操作 
的 时 候 ， 即 时 给 予 反 馈 。 例 如 支付 订单 的 时 候 ， 即 时 告诉 他 支付 的 结果 是 成 功 或 者 失败 。 


无 SM 卡 雪 起 15:51 97% mm 
< 
尼 
报名 成 功 
童 看 全 部 课程 少 
网 易 云 课 堂 


在 他 做 下 一 步 操 作 的 时 候 ， 提 前 设想 他 可 能 要 做 的 事情 。 例 如 客服 中 心 页 面 ， 会 把 一 些 用 
户 常 问 的 问题 罗列 出 来 。 当 然 不 是 所 有 的 互动 都 要 是 一 本 正经 的 ， 适 当 的 时 候 来 点 不 一 样 
的 回馈 会 有 意外 惊喜 。 


何 时 可 以 撞 作 信用 卡 星 间 分 项 


优 纱 客服 联系 方式 


扣 济 发 生 区 误 处 理 
地 。 雹 咒 提 前 结 清 Wana 


动 二 飞机 好 羡 位 


花 需 申请 分 期 后 可 以 一 次 还 清史 
区 。 如何 取 消 关联 认证 


一 个 身份 证 可 以 认证 几 个 账户 
Ce 同和 5 池 到 到 交流 
UP! 我 的 客服 小 游戏 和 
-We 
出 行当 地 服务 CT 
全 人 a a 
如 何 玩 转 支付 宝 信 3 已 加 
站 人 到 并 失 你 不 得 不 知 于 的 和 Cn 人 a a 
携程 支付 宝 
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3 ) 空白 页 插画 、 走 心 文案 


人 是 群居 物种 ， 内 心 都 害怕 孤独 ， 渴 望 有 人 关爱 。 所 以 我 们 可 以 为 产品 里 那些 3 


F 淡 无 奇 的 


地 方 配 上 一 点 人 文 关 怀 ， 例 如 走 心 的 文案 、 可 爱 的 插画 ， 减 轻 用 户 的 烦躁 ， 让 


户 能 够 感 


受到 亲切 。 而 这 些 细节 能 够 成 为 产品 与 用 户 之 间 情 感 传递 的 桥梁 ， 不 仅 能 够 增加 


品 的 好 感度 ， 还 可 以 让 产品 更 加 深入 人 心 。 


拉 音 


画 重 点 


用 户 对 产 


运用 拟人 形 的 方法 能 够 快速 引起 用 户 的 注意 ， 建 立 积极 、 正 面 的 互动 。 拟 人 形 不 仅仅 指 的 
是 模拟 人 的 外 形 、 动 作 、 语 言 ， 还 可 以 模拟 人 的 情感 ， 人 对 现实 世界 的 感受 。 在 遇 到 产品 


交互 难题 的 时 候 ， 可 以 从 生活 中 找 例 子 ， 然 后 把 它 合 理 嫁 接 到 产品 设计 上 。 
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08 ”黄金 比例 


文 / 姜 正 


哲学 分 两 大 派系 : 街头 哲学 和 经 院 哲 学 。 如 果 没 有 经 院 哲 学 ， 街 头 哲学 将 变 得 语无伦次 ; 
如 果 没有 街头 哲学 ， 经 院 哲学 将 变 得 无 关 紧要 。 设 计 理 论 和 实际 设计 的 关系 也 是 如 此 ， 新 
手 设计 师 总 是 对 设计 理论 推崇 有 加 ， 认 为 优秀 的 设计 一 定 是 和 设计 理论 百 分 百 相 契 合 的 ， 
但 现实 和 理想 总 是 存在 一 定 差距 。 就 像 黄 金 比 例 一 样 ， 虽 然 黄金 比例 是 人 们 公认 的 最 佳 比 
例 数 值 ， 但 是 在 实际 应 用 中 则 显得 十 分 鸡肋 。 例 如 ， 我 们 平时 房屋 的 门 把 手 一 般 都 会 位 于 
居中 偏 下 的 位 置 ， 符 合 正常 身高 的 人 容易 触 碰 的 位 置 ， 假 设 按照 黄金 比例 计算 的 位 置 去 放 
置 ， 就 会 出 现 过 高 或 过 低 的 问题 ， 无 法 满足 用 户 的 实际 需求 。 


黄金 比例 的 定义 及 常见 用 法 


1. 黄金 比例 的 定义 
我 们 可 以 将 黄金 比例 理解 为 人 类 视觉 最 舒适 的 比例 分 割 ， 公 式 为 ab~0.618。 


a b 
BB 


a/b~=0.618 


2. 常见 用 法 

黄金 比例 在 平面 的 视觉 设计 中 被 广泛 应 用 ， 例 如 我 们 常 看 到 的 海报 设计 。 平 面 设计 师 
往往 需要 借鉴 黄金 比例 来 确定 海报 的 版 式 骨 架 ， 以 及 各 元 素 的 摆 放 位 置 和 最 佳 视觉 消 
失 点 。 
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Thfs is 
HOWATO 
HOLUIDAY 


地 
ONE BIG SALE 
NOW ON 


内 Racamt 


图 片 来 源 于 Ads of the World 


黄金 比例 不 是 万 能 的 


黄金 比例 的 比例 数据 是 否 能 与 我 们 实际 的 设计 百 分 百 相 契 合 ?我 们 通过 实际 线 上 产品 的 
界面 设计 为 例 进行 比 对 分 析 ， 例 如 金刚 区 的 图 标 设计 以 及 页 面 在 整体 布局 设计 中 的 比例 
关系 。 


1. 图 标 设计 
在 金刚 区 的 图 标 设计 上 ， 大 家 都 或 多 或 少 听 过 这 个 方法 : 用 外 轮廓 面积 乘 以 0.618 ， 得 出 
内 部 图 标 图 形 的 黄金 比例 面积 大 小 。 


外 轮廓 一 图 标 
面积 4 0.618 


这 种 方法 论 与 实际 设计 真 的 百 分 百 相 契 合 吗 ? 我 们 通过 已 经 画 好 的 比例 参考 线 对 京东 和 亚 
马 逊 的 金刚 区 的 图 标 设计 进行 比例 比 对 : 
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京东 亚马逊 


京东 和 亚马逊 的 金刚 区 图 标 设计 统一 在 2 倍率 下 进行 比例 比 对 ， 参 照 提 前 计算 好 的 比例 
圆 环 关系 图 ， 可 以 明显 看 出 内 部 的 图 形 大 小 并 不 符合 预期 中 黄金 比例 关系 ， 内 部 的 图 
形 明显 超出 或 者 小 于 黄金 比例 的 范围 值 ， 甚 至 在 亚马逊 的 金刚 区 中 底部 的 图 标 根本 没 
有 按照 黄金 比例 关系 进行 设计 ， 所 以 黄金 比例 的 方法 论 并 不 能 百 分 百 适用 于 金刚 区 的 
图 标 设计 。 


2. 界面 版 式 设计 

在 实际 的 产品 界面 版 式 设计 中 ， 借 助 黄金 比例 对 界面 进行 分 割 并 不 是 很 合适 。 或 许 大 家 在 
设计 概念 稿 的 时 候 会 借助 黄金 比例 对 界面 的 版 式 布局 进行 分 割 ， 但 是 一 旦 落实 到 实际 的 业 
务 中 ， 它 们 的 关系 并 不 是 对 等 的 。 


2 


概念 分 割 实际 落地 


我 们 以 实际 落地 项 目 作为 参考 依据 ， 统 一 在 2 倍率 下 与 已 计算 好 的 黄金 比例 分 割 线 进行 对 
比 。 这 里 我 们 以 支付 宝 的 首页 为 例 ， 在 不 同 功能 数量 的 情况 下 ， 界 面 的 版 式 布局 都 没有 遵 
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循 黄金 比例 的 分 割 线 进行 排 布 。 


生 尖 生机 “信用卡 还 藉 


sn 
区 < 你 有 1 个 新 的 信 间 信息 名 ee 


，。 作业 于 家 益 到 由 只 i 车 主 服务 更 多 


-wmrraomam 
超 强 视 效 赶 直 阿 凡 达 aaa 
1 wr ED 


惠 支 付 


每 天 8.8 万 有 了 钱 红包 升级 [a 


再 以 今日 头条 、 网 易 新 闻 、 新 浪 新 闻 等 App 为 例 ， 我 们 发 现在 这 种 Feed 流 的 使 用 场景 
下 ，Feed 流 的 目的 是 不 断 给 用 户 提 供 内 容 ， 在 设计 形式 上 会 以 平 铺 内 容 模块 为 主 ， 所 以 
黄金 比例 在 Feed 流 的 设计 当中 不 具备 实际 参考 意义 。 


am 


《 示 是 》 改 要 习 近 平 重要 文章 :加 强 党 对 全 面 
俯 法 治国 的 久 导 


习近平 : 加强 党 对 全 本 依法 治 轩 的 镇 导 
a 


( 求 星 ) 杂志 发 表 习 近 平反 书记 重要 六 


童 《加 强 党 对 全 面 依法 治国 的 领导 》 


习近平 时 间 / 旭 讽 美丽 乡村 让 家 民有 更 多 
看 福 时 


中 美 久 易 谈判 有 何 最 新 进 
展 ? 耿 纳 : 耐心 稍 等 , 答 
军 很 决 全 揭 并 


不 本 再 下 于 隐 步 机 了 ， 现 在 淡 行 折 全 型 
器 步 仙 ， 才 9 块 9 


寺庙 乡 村 让 证 民有 更 多 中 福 且 
文子 头 上代 t- 闻 和 仿 折 

相 一 于 到 生 半 小 所 

到 今天 开 全 有 会 重 布 过 

委 : 将 条 员 二 和 % 洲 痢 2000， | 


AEAS 当 类 英 中 学 交流 会 【32 北京 站 ] 预 
活动 开启 


网 易 新 闻 


习近平 时 间 : 建设 美丽 多 村 让 农民 有 更 多 间 
得 

mo 
中 半 贸 易 笑 现 寺 更 半 莫 合影 “一 


新 纤 出 纺 ( 图 ) 二 
Moa 


要 沁 人 信 六 他 者 侣 -这些 中 国体 坛 佳 洁 信 知 攻 
Br 


喜 肝 1 北京 即将 兰 办 大 型 家 有 内 展 ， 门 村 
名 


8 2 


新 浪 新 闻 
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为 什么 黄金 比例 会 如 此 鸡肋 


在 金刚 区 图 标 和 页 面 版 式 布局 的 例子 中 黄金 比例 并 不 适用 ， 甚 至 显得 很 鸡肋 。 出 现 这 种 状 
况 的 很 大 一 部 分 原因 是 我 们 忽略 了 实际 线 上 产品 的 “业务 属性 ”和 界面 设计 自身 的 “动态 
属性 ”。 


1. 业务 属性 

在 产品 设计 中 我 们 首先 要 考虑 的 就 是 它 的 业务 属性 ， 即 我 们 的 设计 是 否 能 够 满足 用 户 对 业 
务 的 需求 ! 其 次 是 考虑 设计 中 的 目的 性 ， 例 如 我 们 当前 的 业务 目标 是 提升 某 核心 模块 的 点 
击 率 ， 这 个 时 候 设 计 的 工作 是 更 好 地 引导 用 户 去 点 击 选 择 该 模块 。 通 常 我 们 会 通过 多 种 方 
式 去 提高 该 模块 的 视觉 识别 性 。 


回 到 实际 线 上 的 例子 当中 ， 这 里 以 京东 的 金刚 区 图 标 设计 为 例 。 金 刚 区 的 首要 目标 是 为 其 
他 业务 进行 导 流 ， 所 以 为 了 提高 视觉 识别 性 会 将 图 标 做 得 尽量 大 一 些 ， 而 不 是 简单 地 遵循 
黄金 比例 的 设计 方法 论 。 
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再 如 亚马逊 的 金刚 区 设计 ， 其 中 有 一 半 的 业务 是 海外 直 邮 ， 具 有 很 强 的 目的 性 ， 所 以 首要 
的 任务 是 突出 它 的 视觉 识别 性 。 亚 马 逊 这 里 直接 使 用 各 国 的 国旗 进行 图 形 的 庶 党 处 理 ， 简 单 
直 白 ， 用 户 能 够 快速 识别 ， 节 省 了 认 知 成 本 。 假 设 使 用 黄金 比例 进行 换算 设计 ， 缩 小 关键 的 
图 形 设计 则 大 大 影响 图 标的 视觉 识别 性 ， 进 而 影响 业务 的 点 击 率 。 
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亚马逊 


2. 页 面 的 动态 属性 


页 面 并 非 一 成 不 变 ， 更 多 的 是 随 着 功能 增 减 发 生动 态 的 变化 。 例 如 一 些 产品 会 为 用 户 提供 
更 多 选择 的 权限 ， 用 户 可 以 根据 自身 的 需求 将 自己 常用 的 功能 设置 在 首页 ， 随 着 功能 的 增 
减 整个 功能 模块 的 高 度 也 会 发 生动 态 的 变化 。 


在 支付 宝 的 首页 功能 模块 中 ， 用 户 可 以 根据 自身 的 实际 需求 进行 编辑 ， 通 过 编辑 功能 图 标 
我 们 可 以 看 到 该 模块 的 高 度 尺寸 是 根据 用 户 需求 进行 动态 变化 的 ， 并 非 是 一 个 固定 值 ， 所 
以 在 这 里 黄金 比例 的 借鉴 也 无 从 谈 起 。 
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3. 交互 的 动态 属性 

页 面 也 并 非 是 静止 的 ， 它 需要 和 用 户 进行 实时 的 交互 ， 所 以 界面 中 的 各 个 元 素 是 不 断 变化 
的 。 例 如 Feed 流 的 设计 ， 它 需要 不 断 地 为 用 户 展示 新 的 内 容 ， 具 有 很 强 的 交互 性 ， 需 要 
用 户 不 断 地 去 滑动 屏幕 下 拉 刷 新 ， 这 个 时 候 黄金 比例 并 不 能 为 整个 界面 设计 提供 很 好 的 版 
式 设计 参考 。 
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在 我 们 常用 的 资讯 类 型 的 App 中 ， 大 多 数 都 采用 了 Feed 流 的 设计 ， 用 户 在 浏览 的 时 候 需 
要 不 断 地 下 拉 刷 新 内 容 ， 处 于 一 个 实时 交互 的 动态 场景 ， 黄 金 比例 的 版 式 布 局 自然 也 没有 
什么 参考 价值 。 


4. 界面 的 适 配 

在 界面 的 适 配 中 ， 界 面 的 元 素 是 动态 的 。 在 适 配 中 我 们 需要 注意 两 个 主要 的 问题 : 倍率 和 
手机 分 辩 率 。 首 先是 倍率 的 问题 ， 在 不 同 倍率 下 界面 适 配 内 容 的 高 度 尺 寸 会 发 生变 化 ， 导 
致 界面 中 所 显示 的 内 容 也 有 所 不 同 。 例 如 支付 宝 首页 在 iPhone 6 和 iPhone 6 Plus 上 显 
示 时 ， 分 别 是 2 倍率 和 3 倍率 ， 通 过 图 例 我 们 可 以 看 出 ， 在 3 倍率 下 的 内 容 会 比 2 倍率 下 的 
内 容 更 多 。 
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天 天 领 元 宝 。。0。 mdttrf 级 可 中 流 [a 
全 © ? = 四 
iPhone 6 iPhone 6 Plus 


手机 的 分 辩 率 也 是 影响 界面 适 配 的 重要 因素 ， 在 同 倍率 下 ， 手 机 分 辨 高 的 界面 比 手机 分 辨 
低 的 界面 显示 的 内 容 更 多 。 例 如 支付 宝 首页 在 同等 3 倍率 下 ， iPhone Xs 所 显示 的 内 容 明 
显要 比 iPhone 6 Plus 多 出 一 个 模块 。 
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由 于 适 配 的 动态 变化 ， 同 一 个 界面 在 不 同 的 显示 倍率 和 手机 分 辨 率 下 ， 显 示 的 内 容 也 会 
根据 实际 的 适 配 情况 发 生 改变 ， 面 对 动态 变化 的 适 配 设计 ， 黄 金 比例 显得 十 分 鸡肋 。 


画 重点 


( 1 ) 优秀 的 设计 可 能 并 不 能 与 设计 理论 百 分 百 相 契 合 ， 因 为 在 理论 知识 面前 ， 更 加 重要 
的 是 对 实际 业务 和 最 终 实 际 落地 的 分 析 。 


(2 ) 黄金 比例 在 实际 设计 中 显得 鸡肋 的 原因 主要 有 两 点 : 首先 是 忽略 了 产品 实际 的 业务 
目标 ， 产 品 始终 会 以 业务 为 主 ; 其 次 是 忽略 了 界面 自身 的 动态 属性 ， 其 中 导致 动态 属性 变 
化 的 因素 有 : 功能 的 自 定义 变化 、 页 面 的 交互 动 效 、 界 面 适 配 情况 。 
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01 为 什么 你 的 App 不 耐看 


文 / 吴 萌 


在 工作 中 经 常会 有 这 样 的 场景 ， 满 怀 欣喜 地 做 完 一 个 界面 ， 怎 么 都 觉得 不 耐看 ， 但 又 不 知 
道 怎么 去 修改 。 例 如 下 面 这 两 个 界面 ， 整 体 没什么 问题 ， 满 足 了 产品 的 功能 需求 ， 但 从 视 
觉 上 来 看 不 够 精致 ， 图 标 、 配 色 、 投 影 都 存在 问题 。 


[本 全 出 我 不 是 涡 主 时 7 
Ml 工作 (a/5) 
CR 向 区 兰州 由、 伟 蝎 20 秋 PH EE 
中 | wm ms ww 
你 的 名 字 了 .6 
mm [CD (于 地 生 活 (1/2) 
A KR. 习 
所 盏 = 
bY We "se ， * 99 (0) 


当时 的 几 个 页 面 


光 说 哪里 有 问题 还 不 够 ， 我 们 需要 给 出 修改 意见 ， 而 且 这 些 意见 要 可 量化 、 可 执行 ， 让 对 
方 看 完 就 知道 怎么 去 修改 。 而 关于 这 些 我 也 整理 出 了 自己 的 一 些 心得 感悟 ， 大 致 分 为 图 
标 、 颜 色 、 角 度 、 分 割 方式 、 数 字 字 体 、 间 距 、 投 影 、 增 加 修饰 元 素 、 还 原 线 上 真实 场景 
等 几 个 方面 , 下 面 就 从 这 些 方面 来 具体 说 明 怎 么 让 界面 更 有 细节 ， 更 耐看 。 


国标 


图 标 作为 一 个 界面 必 不 可 少 的 元 素 , 直接 影响 着 界面 给 人 的 第 一 感觉 。 一 个 “好 的 ” 图 标 
就 需要 保持 粗细 、 大 小 、 圆 角度 、 风 格 、 修 饰 元 素 一 致 
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1. 粗细 、 大 小 


同一 模块 图 标的 大 小 、 粗 细 需 保持 一 致 , 例如 底部 标签 栏 。 芒 果 TV 底 部 的 五 个 图 标 都 是 
3px, 土豆 视频 的 五 个 图 标 都 是 2px, 粗细 一 样 , 大 小 在 视觉 上 统一 。 


情 先 直播 会 员 关注 加 推荐 排行 栓 


发 现 订阅 我 的 


芒果 TV 描 边 3px 土豆 视频 描 边 2px 


2. 圆 角 度 


同一 模块 图 标的 圆 角 度 也 需要 一 样 ， 例 如 支付 宝 的 四 个 图 标 圆 角度 都 为 8px, 图 标 圆 角 度 一 
会 让 图 标 更 加 统一 。 


3. 风格 


现在 图 标 风格 多 种 多 样 ， 有 走 简洁 的 、 艳 丽 的 、 双 色 的 、 渐 变 的 、 断 线 风 格 的 、2.5D 
的 …… 不 管 选择 哪 种 风格 , 我 们 需要 做 的 就 是 保持 整个 App 内 的 图 标 是 同样 的 风格 。 
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例如 荷包 的 底部 图 标 采 用 偏 卡通 、 夸 张 的 风格 ，App 内 部 的 图 标 也 和 底部 标签 保持 一 致 ; 
闲 鱼 采用 的 是 黑色 和 黄色 的 双色 图 标 ，App 内 部 图 标 也 用 的 是 黄 黑 的 双色 图 标 , 这 样 界面 
整体 就 很 统一 , 经 得 起 推 戎 。 


Phd wy tom 


4. 修饰 元 素 


修饰 图 标的 一 些小 元 素 要 保持 一 致 , 不 能 这 个 图 标 有 修饰 元 素 , 那个 图 标 没 有 , 也 不 能 用 不 
一 样 的 修饰 元 素 。 例 如 爱 奇 艺 的 底部 图 标 内 部 , 都 带 有 相同 样式 的 修饰 元 素 , 这 样 的 图 标 看 
起 来 就 像 是 精心 设计 的 , 而 不 是 纯 素 材 堆砌 。 


® WY Q 
视频 热点 会 员 我 的 泡 泡 


这 里 面 需要 特别 注意 一 点 ， 切 忌 不 经 过 思考 , 纯 套用 素材 。 


直接 用 现成 的 素材 图 标 ， 粗 细 很 难保 持 一 致 , 界面 风格 也 会 不 统一 。 那 不 能 直接 用 网 上 的 
素材 , 自己 又 不 知道 怎么 画 的 时 候 , 应 该 怎么 办 呢 ? 这 个 时 候 我 们 可 以 先 定好 一 种 参考 风格 ， 
借鉴 素材 的 “ 形 ”, 然后 改 成 自己 要 的 那 种 风格 , 其 他 界面 的 图 标 也 都 按照 这 个 标准 做 。 最 
后 把 所 有 图 标 放 在 一 起 , 对 样式 和 大 小 进行 微调 , 使 各 个 图 标 达到 视觉 上 的 统一 。 
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参考 风格 参考 轮廓 成 品 


颜色 要 有 规律 可 循 


颜色 要 有 规律 可 循 指 的 就 是 要 定义 辅助 色 ， 且 辅助 色 不 要 太 多 。 这 样 重复 出 现 多 种 颜色 的 
时 候 ， 也 不 会 让 人 觉得 花哨 。 
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当 不 同 页 面 出 现时 ， 颜 色 也 更 加 统一 。 
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喜马拉雅 FM 
角度 统一 
角度 统一 包含 渐变 以 及 投影 的 角度 ， 在 一 个 App 内 ， 使 用 的 渐变 以 及 投影 的 角度 需要 是 
一 样 的 。 
1. 渐变 


在 扁平 设计 流行 的 时 代 ， 越 来 越 多 的 人 喜欢 用 渐变 来 增加 页 面 质感 ， 但 使 用 渐变 的 时 候 需 
要 注意 ， 角 度 要 一 样 ， 如 下 图 淘宝 所 示 : 


pn 


网 红 爆 康 清音 二 人 | 


淘宝 
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首页 头 部 用 的 是 从 左 到 右 零 度 的 线性 渐变 ， 购 物 车 页 面 的 头 部 以 及 结算 按钮 也 是 用 的 线性 


渐变 。 


栓 红 


除了 淘宝 这 种 各 个 页 面 都 用 的 相同 颜色 的 渐变 ， 还 有 如 下 图 京东 金融 的 不 同 颜色 的 渐变 。 


中国 本 动 人 a23 90 


京 喜 福利 社 日 全 民 欢 乐购 


下 天 和 开会 拆 999 元 人 总 


码 付 优惠 将 包 劝 亲 自 条 优 昌 
下 50 元 者 忆 。。 所 6 元 他 2 元 浊 多 过 锡 昌 允 


5 元 全 用 卡 下 雏 务 限量 抢 ! 
二 条 提 钱 坟 咀 您 | 10 元 话 开 网 费 进 ! 借 


广发 银行 a 银行 精 选 © 


som40 40% 
小 自 上 se 商品 分 天 ml 
画 © 
Eo 
京东 金融 


这 个 时 候 的 角度 相同 ， 指 的 就 是 颜色 的 饱和 度 、 明 度 ， 即 都 是 一 个 角度 的 从 高 到 低 或 者 从 
低 到 高 。 


高 饱和 度 低 饱和 度 


渐变 的 角度 是 大 家 很 容易 忽略 的 问题 ， 做 的 时 候 如 果 随 心 所 欲 ， 光 顾 着 单个 地 方 的 颜色 好 
看 ， 就 会 忽略 了 整体 ， 对 于 用 户 来 说 ， 他 们 看 到 的 整个 页 面 ， 是 所 有 元 素 搭配 起 来 的 整体 
视觉 感受 。 
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2. 投影 
和 渐变 一 样 ， 不 同 地 方 的 同一 个 层级 的 元 素 ， 投 影 参数 需要 一 致 ， 例 如 下 图 过 钱包 的 卡片 
的 投影 ， 理 财 页 面 和 购物 页 面 的 卡片 投影 是 一 样 的 。 


Te0 Mees #0 


3.2040* 


OOgGG6 
坦 钱 包 


原则 上 来 说 ， 一 个 App 内 所 有 页 面 用 到 的 投影 都 必须 是 一 样 的 ， 但 是 难免 有 一 些 特殊 情 
况 ， 如 元 素 大 小 相差 较 大 时 ， 投 影 参 数 一 样 的 话 会 造成 视觉 上 的 不 一 样 。 


大 元 素 小 元 素 


当 遇 到 这 种 情况 时 ， 我 们 就 要 学 会 变通 ， 例 如 把 小 元 素 的 投影 参数 调 小 一 点 ， 让 它 在 视觉 上 
和 大 元 素 保持 一 致 。 就 和 之 前 说 到 的 图 形 的 圆 角 度 一 样 ， 小 元 素 的 圆 角 度 要 小 于 大 元 素 的 。 


圆 角度 24px 圆 角度 24px 
视觉 上 圆 角度 不 统一 视觉 上 圆 角 度 统一 


分 割 方式 


界面 分 割 的 作用 是 区 分 内 容 信息 , 而 为 了 在 区 分 内 容 的 同时 保持 整体 性 , 给 用 户 一 个 良好 的 视 
觉 体验 , 我 们 需要 制定 统一 的 分 割 样式 ( 是 用 线 、 面 、 还 是 留 白 ) 以 及 它们 使 用 的 场景 。 
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1. 线 分 割 
线 分 割 有 两 种 样式 , 一 种 是 通栏 的 分 割 线 , 还 有 一 种 是 不 通栏 左右 留 间距 的 。 需 要 注意 的 
是 ， 分 割 线 的 色 值 不 能 过 大 , 不 然 会 导致 页 面 的 割裂 感 过 强 。 


Pe os Sim PE 
博讯 “音响 要 看 电视 剧 电影 过 三 三 2 


ES 


你 正在 的 》 


腾讯 视频 淘 票 票 


2. 面 分 割 
面 分 割 中 色 值 同 样 不 要 过 大 , 建议 面 分 割 时 的 高 度 为 16px 或 20px (2 倍率 图 下 )。 


3. 留 白 分 割 
用 留 白 来 区 分 模块 的 时 候 需要 注意 留 白 的 大 小 , 以 及 模块 的 层级 关系 。 
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医 琅 新 禧 ! 
除 岁 迎春 风俗 记 
本 于 十 
精 选 故事 E 寺 Cd 加 © 
9 a 也 本 各 


两 个 模块 之 间 的 间距 ( 图 中 榜 色 区 域 ) 要 比 模块 内 部 之 间 ( 图 中 紫色 区 域 ) 的 距离 大 ( 具 
体 可 查询 格式 塔 原理 ) 。 


4. 使 用 场景 


在 做 界面 时 , 定义 好 分 割 方式 之 后 , 还 需要 定义 它们 所 使 用 的 场景 。 以 腾讯 视频 为 例 ， 首 页 
大 模块 与 大 模块 之 间 采 用 的 是 线 分 割 , 那么 其 他 页 面相 同 模块 也 需要 用 线 分 割 。 


wisms us vim 
Or 


sx 但 后 开工 策 一 天 


(了 Q 
精 选 VIP 福利 社 电视剧 ”电影 ”动漫 少儿 


入 一 入 可 要 


LT 


过 大 年 出 大片， 一 次 看 过 病 ! 


闪 doki 星 现 榜 》 
A 
- | 量具 人 气 机 县 佳 新 秀 榜 
亲属 久 - 贫 四 神奇 女 全 -战斗 Ne1 直 天 ed 二天 
4 
热门 话题 > 
共 假 后 开工 第 一 天 间 2018 为 爱 豆 许 个 愿 
这 痢 电 影 物 本 二 出。 … 寺 看 更 多 | 
攻关 的 铁 学 -天 年 比 叶 传 -看 et ee 
明星 驾到 > 


会 98 a 4 会 2。8 


腾讯 视频 -VIP 腾讯 视频 -doki 


除了 上 述 所 说 的 模块 与 模块 之 间 的 分 割 方式 ， 还 需要 定义 模块 内 部 元 素 之 间 的 分 割 方式 。 
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最 常 出 现 的 就 是 列表 页 ， 如 土豆 视频 中 “我 的 ”页 面 列表 用 的 是 留 白 。 


i 37 Te 
二 
松子 的 检 子 Mandy 2 
个 ”消息 吉本 
回 我 的 收藏 
© Nh 
图 观看 记录 
加 2 只 
咏 贡 门 对 动 [3 
@ HS Q@ am @ 
土豆 视频 -我 的 
收藏 、 缓 存 页 面 用 的 也 是 留 白 , 与 之 对 应 。 
Lh Ta et PD ay EEE 
< 收藏 | < 级 存 9] 


二 一 菲 让 唐 外 您 当天 线 "结果 
收 到 朝鲜 语 频道, 太 过 了 1 

国外 回 米 的 孙女 和 张国立 手 折 贡 
证 想不到 张国立 充 儿 全 痢 听 
《旱情 公 刷 》 品 子 天 和 才艺 双开 
号 战 像 肝 口 站 .台词 功 区 本 净 的 


中 女孩 般 耳 机 享 直 鸭 道 起火 车 挤 
PE Aas 


土豆 视频 -收藏 


数字 字体 


界面 字体 普遍 用 的 都 是 默认 字体 , 但 其 实 我 们 在 一 些 使 用 数字 的 地 方 , 可 以 自 定义 一 个 字 


体 , 这 点 在 金融 类 产品 里 尤为 明显 。 


作 死 朱 战 和 开水 便 在 防水 衣服 
上 我 会 感 党 有 多 项 呢 97 
Dy 火影 : 鸣 人 实力 音 禄 4 由 这 异 眼 
因 总 综 人 物 .中 以 证 明史 人 具备 


土豆 视频 -缓存 
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PE wae = 
号 ”gH eg 条 B&H 名 


服务 中心 Sts 


1.00 


+ @ 妈 活 出 备 
目 免费 岛 500 元 60% po 
癌 京东 小 金 订 100 
THEEA OS 器 定 鸯 出 全 
ee one 10.0% 定 丰 对 (所 手 可 ) 
四 5 mwooos 
De 75% 定 存 宝 [3 月 期 
Dm nmeor 
90% 定 存 室 「6 月 央 
9 他 © 回 加 
Ed 所 bd 虽 
京东 金融 能 猫 金库 


这 种 类 型 的 App 里 面 很 多 都 跟 数字 相关 , 自 带 的 字体 没 办 法 很 好 地 展现 产品 的 特点 , 也 不 好 
和 别家 产品 区 分 。 如 下 图 所 示 , 10.0% 和 9.0% 是 定制 的 字体 , 7.5% 是 默认 的 字体 , 很 明显 
默认 的 字体 缺乏 自己 的 特点 , 而 定制 的 字体 带 有 圆 嘟 嘟 的 特性 , 也 和 界面 整体 风格 较 匹 配 。 


定 存 宝 (新 手 专 享 ) 


定 存 宝 「3 月 期 


定 存 宝 "6 月 期 


熊猫 金库 


除了 金融 类 的 产品 , 其 他 类 型 的 产品 也 可 以 定制 数字 字体 , 例如 价格 、 登 录 注 册 时 的 数字 、 验 
证 码 等 , 特别 是 验证 码 发 送 后 的 倒计时 , 默认 的 字体 过 于 纤细 , 压 不 住 界 面 。 这 时 候 我 们 可 以 
通过 定制 一 个 字体 , 使 它 与 其 他 元 素 区 分 开 ， 更 突出 、 更 明显 ， 从 而 提升 界面 的 视觉 品质 。 
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15818467812 15818467812 

72x2Y PC 72x2Y FPCY 

2678 38S 2678 5 
默认 字体 自 定义 字体 


间距 


当 定 义 文字 间距 时 ， 如 果 直 接 用 文字 本 身 来 定义 ， 很 容易 出 现 偏差 ， 因 为 不 同 软件 中 不 同 
字体 的 行 高 都 是 不 一 样 的 。 


海盐 社 。 海 直 神 | 
Sketch ps 


其 次 ， 当 文字 和 图 标 组 合 出 现 的 时 候 ， 如 果 以 元 素 本 身 来 定义 上 下 间距 的 话 ， 间 距 会 因为 
元 素 本 身 大 小 的 不 同 而 不 一 样 ， 如 此 一 来 间距 就 没有 一 个 定 值 ， 没 有 定 值 就 意味 着 同一 个 
模块 间距 有 好 几 种 ， 标 注 起 来 也 麻烦 ， 而 且 容 易 出 错 。 

4 Te 2 

日 订单 


32 37 


伺 消息 


从 在 线 客服 


其 实 有 一 个 最 简单 的 方法 ， 就 是 用 cell 的 形式 ， 定 一 个 固定 的 高 度 ， 内 部 的 元 素 都 在 内 部 
居中 对 齐 。 这 样 就 不 需要 考虑 文字 和 图 标的 高 度 不 一 样 的 情况 了 。 


日 订单 ls 


全 ”在线 客服 > 
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是 乡 


B74 


参考 真实 世界 的 情况 ， 物 体 的 投影 都 带 有 物体 本 身 的 颜色 。 所 以 在 制作 投影 的 时 候 , 可 以 
采用 图 片 芭 加 的 方式 , 使 投影 更 加 通 透 、 立 体 ， 也 使 得 界面 更 有 细节 。 


图 片 世 加 投影 默认 投影 


从 上 图 可 以 明显 看 出 ， 左 边 的 图 片 更 有 细节 一 点 ， 不 只 是 简单 的 投影 。 那 么 具体 操作 方法 
是 什么 ?首先 将 图 片 复制 一 个 置 于 下 方 , 然后 缩小 一 点 , 高 斯 模糊 后 去 加 。 


图 片 直 加 投影 默认 投影 
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看 到 这 里 , 可 能 就 有 人 会 说 这 样 的 效果 好 看 是 好 看 , 但 是 没 法 落地 , 那 其 实 我 们 可 以 变通 一 
下 。 加 投影 的 目的 是 为 了 让 元 素 突出 ， 让 元 素 突出 有 两 个 方法 , 一 个 是 元 素 本 身 突出 ; 另 
外 一 个 是 周围 其 他 元 素 减弱 。 


元 素 本 身 突出 周围 元 素 减 弱 


所 以 在 实际 落地 的 时 候 , 我 们 可 以 只 加 默认 的 投影 , 但 是 去 掉 旁 边 两 个 元 素 的 投影 , 通过 减 
弱 周围 元 素 , 起 到 突出 自身 的 作用 。 


OQ000 eeoocoo0 


簿 你 喜欢 es» 猜 你 喜欢 本 和 )》 
LD 
s Ee: 2) 
概念 入 落地 稿 
增加 修饰 元 素 


增加 修饰 元 素 就 是 给 页 面 增加 细节 ， 恰 到 好 处 的 细节 能 让 人 觉得 设计 者 是 花费 了 心思 在 里 
面 的 ， 而 不 是 随意 摆 放 。 


1. 卡片 

卡片 作为 一 种 包容 性 的 “容器 ”， 它 能 将 不 同 的 信息 很 好 地 集合 在 一 起 ， 而 且 卡片 一 般 占 
用 面积 比较 大 ， 如 果 只 有 简 简单 单 的 一 个 背景 ， 很 容易 造成 页 面 很 空 ， 没 有 细节 。 所 以 就 
需要 给 它 添加 一 点 恰如其分 的 小 元 素 。 例 如 下 图 员 里 嘎 啦 在 卡片 上 加 了 卡通 形象 、 圆 点 等 


家 
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修饰 ， 使 得 卡片 更 丰富 ， 更 有 细节 ; 自如 则 在 卡片 上 加 了 重力 感应 ， 倾 斜 手机 ， 小 元 素 会 
跟随 运动 ， 使 得 卡片 更 有 趣味 性 。 


UF wa 4 mE 


CP 2 窗 


自如 


例如 下 图 网 易 有 钱 的 银行 卡 就 如 入 了 logo 的 底 纹 ， 看 起 来 就 比 京东 金融 的 更 有 细节 。 其 
次 ， 京 东 金 融 的 银行 卡 信息 与 申办 小 白 卡 、 小 金 卡 相 比 ， 细 节 处 理 上 也 显得 更 弱 一 些 ， 申 
办 卡 的 背景 上 有 一 些小 的 修饰 元 素 ， 增 添 了 卡片 的 细节 成 分 。 


1 E22 Fr ap 人 ra To 
< 要 产 详情 < 我 的 急行 卡 + 


记 - 捷 网 名 癌 上 日 


网 易 有 钱 京东 金融 


其 实说 来 说 去 就 是 这 些小 的 细节 点 ， 背 景 上 加 品牌 元 素 ， 或 者 加 一 些 没 有 什么 实际 意义 的 修 
饰 元 素 。 说 起 来 很 容易 ， 做 的 时 候 需 要 特别 注意 分 寸 ， 不 要 太 过 了 ， 过 了 就 会 显得 花哨 。 
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2. 轮 播 点 
第 二 个 例子 是 最 常见 的 轮 播 点 ， 虽 在 介绍 方法 ， 希 望 大 家 能 举一反三 。 


说 到 轮 播 点 ， 大 家 脑海 中 最 先 想到 的 样式 肯定 是 几 个 小 圆 点 ， 没 选中 的 是 灰色 的 ， 选 中 是 
白色 的 ， 如 下 图 所 示 : 


EV? 8 $ saw 


虾米 音乐 


这 样 的 方式 没什么 问题 ， 能 够 满足 产品 的 需求 。 但 是 我 们 可 不 可 以 在 现 有 的 基础 上 ， 再 进 
行 一 些 细节 处 理 呢 ? 例如 把 当前 的 选中 状态 做 得 更 明显 些 。 


| 中 国 移动 从 


精 选 
狼 , VE -= 合 


[ 锋 味 2] 林 依 早 贾 吻 从 遭 放权 虱 “ 进 弃 


再 例如 加 上 品牌 色 。 


方式 有 很 多 种 ， 只 要 能 够 满足 产品 功能 需求 ， 不 破坏 用 户 的 使 用 习惯 ， 纯 视觉 上 的 修改 都 
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可 以 尝试 。 先 发 散 思维 、 放 飞 自我 ， 然 后 再 去 考虑 落地 时 的 情况 。 


就 拿 轮 播 点 来 说 ， 它 的 主要 作用 是 提示 用 户 当前 选中 的 是 第 几 张 图 ， 以 及 一 共有 几 张 图 ， 
只 要 能 满足 这 些 功 能 就 好 ， 如 ENJOY 是 以 数字 轮 播 。 


和 ae 7 0 om 
ENJOYanar Q 


今 B 主 推 4 


,TOP2D ， 


册 国 口 矶 爆 款 


ENJOY 


画 重 点 


细节 决定 成 败 , 要 想 让 自己 做 的 界面 更 精致 、 更 耐看 、 更 有 细节 、 更 耐 推 袁 , 就 需要 我 们 在 
设计 的 时 候 从 小 处 做 起 , 例如 文中 所 说 的 这 几 点 : 


(1 


图 标 粗 细 、 大 小 、 贺 角度、 风格 、 修 饰 小 元 素 保持 一 致 ; 


(2 ) 界面 内 所 使 用 的 辅助 色 要 有 规律 可 循 ， 可 通过 定义 辅助 色 来 实现 ; 
(3 ) 渐变 以 及 投影 的 角度 要 统一 ; 


(4 ) 页 面 分 割 方式 要 有 规则 可 循 , 规则 定好 之 后 , 其 他 界面 都 需要 遵循 该 规则 , 例如 模块 内 
部 的 列表 之 间 定 的 是 用 留 白 , 那么 其 他 界面 相同 模块 都 需要 用 留 白 ; 


(5 ) 数字 字体 可 定制 特殊 字体 , 和 其 他 内 容 做 一 个 区 分 , 提高 界面 的 视觉 品质 ; 
(6 ) 涉及 间距 的 时 候 ， 优 先 选用 cell; 


(7 ) 在 设计 中 我 们 可 以 参考 现实 世界 的 投影 方式 , 在 图 片 下 方 夫 加 一 层 高 斯 模糊 的 图 片 ， 
让 投影 更 通 透 、 更 自然 、 更 贴近 真实 环境 ; 


( 8 ) 尝试 在 界面 合适 的 位 置 增加 恰到好处 的 细节 ， 例 如 在 卡片 背景 上 以 及 轮 播 点 上 ; 


(9 ) 作 图 的 时 候 ， 要 尽 可 能 地 还 原 线 上 真实 效果 ， 把 设计 稿 当 作 线 上 完成 稿 来 对 待 。 
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02 三 招 教 你 学 会 优化 信息 层级 


文 / 姜 正 


信息 层级 的 划分 是 我 们 日 常设 计 工作 中 最 容易 被 忽视 的 一 环 ， 优 秀 的 信息 层级 划分 能 够 准 
确 传达 信息 ， 而 信息 层级 划分 不 清 的 设计 往往 会 给 用 户 造 成 困扰 ， 不 能 满足 用 户 当下 的 需 
求 ， 导 致 用 户 的 流失 。 接 下 来 我 们 一 起 看 一 下 如 何 快速 地 优化 信息 层级 。 


梳理 信息 


为 了 能 够 有 效 地 划分 界面 中 的 信息 层级 ， 我 们 首先 要 做 的 就 是 梳理 信息 ， 对 页 面 内 的 信息 
先进 行 组 织 归纳 ， 将 同类 信息 或 者 关联 性 强 的 信息 组 织 到 一 起 。 像 个 人 信息 页 面 中 ， 姓 名 
之 后 紧 跟 的 是 性 别 、 出 生年 月 日 等 诸如 此 类 的 信息 。 
BR li 全 下 于 315 里 了 95% 和 于/ 
< 我 的 资料 II 
上 传 头像 并 完善 个 人 信息 ， 即 可 获得 积分 ~ 


BB 
个 人 主页 青 景 转 
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亲密 性 原则 


当 对 页 面 内 的 信息 完成 梳理 之 后 ， 我 们 会 借鉴 亲密 性 原则 对 信息 进行 设计 。 亲 密 性 原则 是 
由 Robin Williams 在 《 写 给 大 家 看 的 设计 书 》 中 所 提 到 的 ， 其 中 亲密 性 原则 是 指 彼此 相 
关 的 元 素 应 当 靠 近 ， 组 织 在 一 起 。 如 果 多 个 元 素 之 间 存 在 很 强 的 亲密 性 ， 它 们 就 会 成 为 一 
个 视觉 单元 ， 而 不 是 多 个 孤立 的 元 素 。 


亲密 性 有 助 于 信息 的 统一 性 ， 符 合用 户 对 同类 信息 顺延 阅读 的 心智 模型 ， 减 少 了 视觉 混 
乱 ， 为 用 户 提供 一 个 逻辑 清晰 的 信息 结构 系统 。 


亲密 性 的 根本 目的 在 于 实现 “组 织 性 ”。 我 们 需要 将 相同 属性 的 信息 组 织 在 一 起 ， 为 页 面 
的 内 部 建立 起 一 个 良好 的 信息 浏览 秩序 ， 符 合用 户 的 阅读 习惯 ,避免 用 户 在 浏览 信息 的 时 
候 耗 费 过 多 的 精力 或 看 不 懂 。 这 里 我 们 以 淘 票 票 为 例 进行 分 析 : 
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通过 上 图 ， 我 们 可 以 看 出 淘 票 票 在 电影 的 简介 中 将 同属 性 的 信息 进行 有 序 组 织 ， 使 得 界面 
看 起 来 整齐 有 序 ， 并 符合 用 户 自 上 而 下 、 从 左 到 右 的 阅读 习惯 。 


对 比 原则 


对 比 原则 的 核心 思想 是 避免 页 面 中 的 元 素 过 于 相似 ， 我 们 需要 通过 对 比 的 方法 让 页 面 上 重 
要 的 元 素 能 首先 引起 用 户 的 注意 ， 而 不 是 页 面 整体 都 十 分 平庸 ， 让 用 户 感觉 无 从 下 手 。 
( 引 自 Robin Williams 所 著 的 《 写 给 大 家 看 的 设计 书 》。 ) 


对 比 是 我 们 区 分 信息 层级 的 重要 手段 ， 通 过 加 强 元 素 之 间 的 对 比 来 区 分 信息 的 主 次 关 
系 。 在 处 理 信息 的 时 候 ， 我 们 通常 会 使 用 字 重 ( 粗细 ) 、 大 小 、 色 彩 、 字 体 四 个 维度 进 


行 对 比 。 
OO 
1. 字 重 对 比 


字 重 是 我 们 在 使 用 字体 时 经 常 考虑 的 一 个 变量 ， 通 过 字体 粗细 的 差异 对 比 来 区 分 信息 之 间 
的 主 次 关系 。 


在 设计 中 ， 我 们 要 尽量 选择 字 重 丰富 的 字体 ， 这 样 能 够 保证 视觉 的 统一 性 ， 不 会 出 现 
字形 差异 这 种 细节 性 的 错误 。 例 如 ，iOS 的 官方 字体 苹 方 字体 就 含有 丰富 的 字 重 ， 
Ultralight、Thin 、Light、Regular、Medium、Semibold 能 够 满足 我 们 日 常设 计 中 的 大 
部 分 需求 ， 如 下 图 所 示 : 


Thin Light Regular Medium Semibold 


通过 字 重 的 对 比 我 们 可 以 区 别 信 息 的 优先 级 以 及 不 同 状态 。 例 如 我 们 常见 的 项 部 导航 栏 ， 
大 部 分 都 是 通过 字 重 的 对 比 来 区 别 选 中 状态 和 未 选中 状态 ， 如 下 图 所 示 : 
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加 搜索 ml 仿 下 午 4:32 @ 了 100% ED); 


人 洒 摄影 设计 旅行 影 | Y 
LOFTER 


LOFTER 顶部 导航 栏 中 ， 选 中 状态 的 字体 会 变 粗 ， 而 未 选中 的 字体 没有 变化 ， 用 户 可 以 
明显 区 分 选中 和 未 选中 状态 的 区 别 ， 以 及 当前 所 处 的 位 置 。 


2. 大 小 对 比 

大 小 对 比 是 最 直 白 的 方式 ， 面 积 大 小 的 对 比 肉眼 更 加 容易 分 辨 ， 对 比 效果 更 加 明显 。 因 为 
“大 ”的 文字 信息 更 具有 视觉 冲击 力 ， 更 容易 被 用 户 看 到 ， 信 息 等 级 自然 也 会 高 一 些 。 例 
如 ， 常 见 的 大 小 标题 的 对 比 或 者 标题 与 辅助 文案 的 对 比 ， 如 下 图 所 示 : 


本 造 推荐 。 我 关注 的 

BE 河马 电 及 加 

(na) 一 万 凡 电 影 EE ” 

入 志文 上证 加 

OO © 

@ 影 人 玫 大 和 加 
A @ He@e 中 

淘 票 票 


上 图 标题 字体 明显 要 比 辅 助 文案 字体 大 ， 信 息 层级 明确 ， 用 户 第 一 眼 首先 就 能 看 到 标题 名 
称 ， 其 次 才 是 辅助 文案 ， 这 样 符合 用 户 的 心智 模型 ， 不 会 给 用 户 造成 困扰 。 


3. 色彩 对 比 


色彩 性 格 鲜明 ， 相 对 于 无 色相 的 黑白 文字 更 加 出 彩 ， 巧 妙 使 用 色彩 可 以 更 好 地 优化 信息 
层级 。 
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色彩 的 优势 主要 有 两 点 : 首先 是 色相 鲜明 ， 视 觉 冲 击 力 较 强 ， 容 易 被 人 察觉 ; 其 次 ， 我 
们 可 以 利用 色彩 心理 学 传递 一 定 的 信息 ， 例 如 在 电 商 中 经 常用 红色 优惠 标签 显示 出 降价 
的 紧迫 感 。 


© 为 攻 购 医 国 国 全 有 好 和 


© my 个 淘宝 直播 ES 
| 0 
© HR 由 每 日 好 让 


信和 一目 


éb 直播 全 球 生活 二 归 国 


Wh 


已 只 


pes wss 


淘宝 


色彩 对 比 主要 有 两 种 处 理 方式 : 添加 文字 信息 颜色 和 在 文字 信息 后 面 添加 背景 色 。 通 常 在 
运营 活动 中 ， 会 采用 将 标题 添加 色彩 的 方式 ， 用 以 凸显 运营 活动 的 重要 性 ， 并 能 够 将 标题 
与 底部 的 辅助 文案 明显 区 别 出 来 。 


避 上 测 志 士 尼 & 


北京 十 香港 


飞 猪 


给 文字 信息 添加 背景 色 最 常见 的 使 用 场景 就 是 标签 。 标 签 在 日 常 使 用 中 发 挥 着 重要 的 
作用 ， 但 是 设计 面积 较 小 ， 通 过 色彩 能 够 很 好 地 凸显 自己 的 层级 ， 传 递 信 息 。 
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Ge ©®@ gm & 


4. 字体 对 比 

经 常 使 用 的 字体 大 致 可 分 为 无 衬 线 体 、 衬 线 体 和 手写 体 。 字 体 的 对 比 是 指 通过 不 同类 型 的 
字体 进行 组 合 对 比 ， 利 用 不 同 字体 字形 之 间 的 差异 产生 一 定 的 视觉 反差 ， 来 区 分 信息 之 间 
的 主 次 关系 。 


例如 ， 淘 票 票 中 “ 阿 丽 塔 ”使 用 的 是 手写 体 ， 而 底部 的 辅助 文案 则 使 用 了 普通 的 黑体 ， 
过 两 种 不 同类 型 的 字体 对 比 ， 我 们 可 以 清晰 地 分 辨 出 信息 之 间 的 主 次 关系 。 


萝 


视觉 流 


人 类 的 视觉 运动 都 是 点 到 点 跳跃 式 扫 描 而 非 平滑 移动 ，Google 早期 通过 眼 动 仪 观察 用 户 
在 浏览 界面 内 容 时 的 视觉 流 呈 F 形 ， 而 且 越 往 下 视觉 注意 力 越 少 ， 如 下 图 所 示 : 
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当 我 们 在 进行 信息 分 类 之 后 ， 可 借鉴 视觉 流 的 原则 ， 来 审视 自己 的 设计 是 否 符合 用 户 自 左 
到 右 、 自 上 到 下 的 阅读 习惯 。 


利 复 江豚 泪 流 不 止 九 


[ 蜀 报 ] 中 国 33 名 游客 在 秘鲁 酒店 
图 动 持 大 使 馆 回应 


任 岁 女孩 遭 家 人 通婚 深夜 醉 倒 街 
酒 后 金 句 频 出 | 


洋 些 剧情 是 这 样 拍 出 来 的 演员 的 器 


画 重点 


(1 ) 优秀 的 信息 层级 设计 主 次 分 明 ， 能 够 准确 传递 设计 中 的 信息 ， 不 会 给 用 户 造成 困 
扰 ， 从 而 带 来 优秀 的 用 户 体验 。 


(2 ) 优化 信息 层级 的 用 户 体验 主要 有 三 步 : 首先 进行 信息 梳理 ， 将 同类 型 的 信息 进行 
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组 织 归纳 ; 其 次 加 强 信息 之 间 的 对 比 ， 主 要 对 比方 式 有 字 重 对 比 、 大 小 对 比 、 色 彩 对 
比 、 字 体 对 比 ; 最 后 要 注意 信息 设计 符合 用 户 的 阅读 习惯 ， 即 自 上 而 下 、 从 左 到 右 的 
阅读 顺序 。 


参考 资料 
三 步 优化 界面 信息 层级 ， 让 用 户 找 准 重点 ”https://zhuanlan.zhihu.com/p/36648284 


主体 与 层级 关系 第 六 节 复 盘 一 一 文字 的 层级 关系 ”https://www.jianshu.com/p/ 
f3996be4c7e7 
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03 四 步 教 你 提升 表单 设计 的 用 
户 体 验 


文 / 姜 正 


优秀 设计 师 和 普通 设计 师 的 差异 就 是 在 于 对 细节 的 把 控 。 以 表单 设计 为 例 ， 大 家 可 能 觉得 
没什么 值得 深究 ， 但 一 个 优秀 的 表单 设计 能 够 帮助 产品 赢得 更 多 的 留存 ， 提 升 用 户 的 操作 
效率 ， 为 用 户 带 来 良好 的 感受 。 


表单 设计 的 目的 


表单 作为 最 常见 的 组 件 之 一 ， 肩 负 着 重要 的 作用 。 表 单 是 产品 与 用 户 对 话 的 主要 途径 之 
一 ， 通 过 填写 表单 ， 产 品 可 以 收集 到 用 户 数据 ， 并 且 用 户 可 以 通过 填写 表单 来 反馈 自己 对 
产品 的 建议 。 最 常见 的 表单 有 调查 问卷 和 进入 App 时 的 兴趣 选择 ， 例 如 下 图 ， 用 户 通过 
填写 表单 完成 了 自己 对 产品 的 反馈 。 


下 9100a e106%m 


< 反馈 帮助 中 心 
次 站 务 中 心 内 意见 反馈 


如 何 举报 ? 怎么 正确 使 用 学 报 功能 ? 
知 何 更 接线 定 ? 如何 解 儿 手机 号 ? 
送 到 庄户 /企业 侵权 内 容 ， 如 何 投诉 ? 
知 平 币 如 何 充值 和 使 用 7 


我 补 禁 言 了 ， 如 何 进行 申诉 ? 


© Hs men/ ms) 
© sms maakse2s) 


@ ss Fns) 


知 笠 
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表单 设计 的 作用 


表单 设计 的 主要 作用 是 提高 用 户 的 填写 效率 。 为 了 提高 用 户 的 填写 效率 ， 我 们 首先 要 做 到 
就 是 挽留 用 户 ， 让 用 户 愿 意 花 时 间 和 精力 去 填写 表单 ， 所 以 表单 设计 的 用 户 体验 至 关 重 
要 。 接 下 来 我 们 看 一 下 通过 哪 几 步 能 够 有 效 提 高 表单 的 用 户 体验 设计 。 


提升 表单 设计 的 4 个 关键 步骤 


1. 优化 信息 层级 
首先 我 们 需要 做 的 就 是 优化 信息 层级 ， 面 对 繁 乱 的 信息 ， 用 户 往往 会 不 知 所 措 ， 放 弃 当 前 
任务 的 操作 也 是 理所当然 的 事情 。 


对 于 优化 信息 层级 ， 首 先 要 做 的 就 是 对 信息 进行 分 类 ， 通 过 亲密 性 的 原则 将 相同 类 型 的 
信息 组 合 在 一 起 ， 这 样 做 符合 用 户 对 信息 理解 的 心智 模型 ， 信 息 归 类 后 填写 起 来 也 更 加 
方便 。 


[LE Tose B10 
€ 发 布 租赁 房 源 (北京 ) 0 


i 所 在 小 区 

头像 @ 具体 地 址 

用 户 名 pnayucadz 有 望 间 全 

收 筑 地 址 fH 
联系 万 式 

本 号 本 定 

@m 

© i 未 

@ xHs 二 

一 一 一 | 

N_i 位 二天 全 


饿 了 么 贝壳 公寓 
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优化 信息 层级 的 最 后 一 步 就 是 对 已 分 组 的 信息 进行 视觉 层级 的 处 理 ， 通 过 颜色 、 大 小 、 字 
体 等 视觉 手段 来 区 分 它们 的 先后 关系 。 通 过 对 信息 层级 的 视觉 区 分 ， 能 够 有 效 地 告诉 用 户 
它们 之 间 前 后 的 逻辑 关系 。 


中 国 壬 通 全 下 于 208 画 了 4a0x 下 5 
取消 


a 

@ sne 

@ Fne7inft 
电话 铃声 默认 
短信 失声 束 认 


A niin 


姓 


iPhone 通讯 录 


2. 为 用 户 提供 便捷 的 操作 流程 


为 用 户 提供 便捷 的 操作 流程 能 够 有 效 减少 用 户 所 耗费 的 时 间 和 精力 ， 投 入 少 收益 大 ， 用 户 
自然 不 会 抗拒 填写 表单 。 


优化 操作 流程 中 要 求 我 们 站 在 用 户 的 角度 上 去 思考 问题 ， 如 何 为 用 户 提供 便捷 的 操作 ， 成 
为 提升 表单 用 户 体验 设计 的 重要 一 步 。 最 经 常 使 用 的 两 种 方法 就 是 “交互 减 步 长 ”和 “ 拆 
分 步骤 ”。 


1 ) 交互 减 步 长 
在 页 面 中 减少 交互 路 径 ， 能 够 有 效 减 少 用 户 的 操作 成 本 。 我 们 可 以 根据 用 户 操作 习惯 进行 


预 判 ， 将 一 些 重复 性 日 常 操作 行为 设计 成 “ 预 设 ”， 简 化 用 户 的 操作 行为 。 我 们 经 常 使 用 
的 充值 页 面 为 例 : 
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人 Ti es 
< 手机 充值 我 的 


188 8888 8888 3 


手术 本末 | 昌 于 科 内 本 | 本 站 全 休 页， 更 表 可 所 


微 信 充 值 


在 充值 页 面 中 ， 将 原来 要 手动 录入 的 充值 金额 转换 成 点 击 卡片 一 键 充 值 的 形式 ， 用 户 不 需 
要 像 以 前 通过 “点 击 一 输入 金额 一 确定 一 充值 ”这 样 漫长 的 步骤 完成 充值 。 


2 ) 拆 分 步骤 

简短 的 交互 并 不 等 同 于 优秀 的 用 户 体验 ， 如 果 大 量 的 信息 出 现在 同一 个 页 面 内 ， 用 户 首先 遇 
到 的 难题 就 是 需要 辨别 大 量 信息 ， 其 次 就 是 在 一 个 界面 中 进行 让 人 感觉 十 分 元 长 的 操作 。 
当面 对 信息 量 大 且 较 为 复杂 的 表单 设计 时 ， 需 要 对 其 进行 拆 解 ， 通 过 将 含有 大 量 信息 的 表 
单 拆 解 成 多 个 简单 任务 表单 ， 将 复杂 的 程序 简单 化 。 虽 然 这 增加 了 交互 的 路 径 ， 但 是 被 拆 
解 的 每 个 表单 都 将 信息 简化 ， 用 户 可 以 快速 录入 ， 每 完成 一 个 子 表单 的 录入 ， 用 户 内 心 就 
会 获得 一 定 的 成 就 感 ， 继 而 激励 用 户 完成 所 有 的 表单 录入 ， 如 下 图 所 示 : 


ss Te CE Hain ten 
mn 发 布 全 由 Wee 


E be 
Pre sar 园 堵 


转 转 
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转 转 的 发 布 器 将 发 布 任务 拆 分 多 个 子 任务 ， 用 户 通 过 对 子 表单 进行 录入 ， 完 成 对 整体 表单 
的 录入 。 这 样 虽然 增加 了 表单 录入 的 步骤 ， 但 每 一 步 却 足够 简单 ， 不 会 给 用 户 造成 困扰 ， 
最 终 提升 了 整体 表单 录入 的 用 户 体验 。 


3. 提供 及 时 的 状态 反馈 

当 用 户 在 进行 表单 录入 的 时 候 ， 及 时 的 状态 反馈 能 提高 产品 的 容错 率 ， 并 告诉 用 户 当前 所 
处 的 状态 以 及 下 一 步 应 该 怎么 办 。 在 表单 录入 的 时 候 有 两 种 常见 的 状态 ， 一 种 是 表单 录入 
错误 时 的 提示 ， 另 一 种 是 表单 录入 正确 时 的 提示 。 


1 ) 错误 提示 

当 录 入 错误 的 时 候 ， 我 们 需要 善意 地 提醒 用 户 当前 的 状态 错误 ， 并 且 详 细 地 告诉 用 户 哪 一 
步 出 现 了 问题 ， 解 决 方案 是 什么 。 例 如 京东 的 登录 页 面 ， 用 户 在 登录 中 往往 会 犯 一 些 简 单 
的 错误 ， 例 如 验证 码 输 入 错误 或 者 密码 强度 过 低 等 ， 这 个 时 候 及 时 的 状态 反馈 能 帮助 用 户 
修改 这 些 错误 ， 提 高 产品 的 容错 率 。 


CE Foss @ 1 ex m+ 


x 
们 好 ,ED 
欢迎 来 到 京东 金融 


18888888888 


eeeeeeeee ~ 


短信 过 证 本 全 襄 记 于 快 带 并 


2 ) 正确 提示 

当 用 户 录 入 正确 的 时 候 ， 我 们 需要 给 予 用 户 操作 成 功 的 反馈 ， 并 鼓励 和 夸奖 用 户 ， 使 得 用 
户 获得 成 就 感 ， 有 足够 的 动力 继续 使 用 产品 或 分 享 至 其 他 平台 ， 提 高 产品 的 留存 。 使 用 发 
布 器 发 布 成 功 的 时 候 就 是 一 个 例子 ， 如 下 图 所 示 : 
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Ed T3000 


发 布 成 功 
分 本 到 MT 下台 ， 职 了 更 车 光 


SO BS 女 


ms Mn 0 nN oon 


秋 归 二 已 子 到 内 多 及 光 宝 才 笋 ， 以 收 本 消 要 者 
保生 二 为 全 中 和 生财 人 的 行为， 了 胡 天 克 》 


闲 鱼 


闲 鱼 中 ， 当 用 户 经 过 一 系列 表单 的 填写 最 终 发 布 成 功 ， 产 品 会 第 一 时 间 告 知 用 户 ， 用 户 获 
得 成 就 感 继而 有 动力 分 享 到 其 他 平台 ， 提 高 了 产品 的 曝光 率 。 


4. 设计 符合 当前 使 用 场景 

表单 设计 符合 用 户 当前 的 使 用 场景 ， 能 够 增强 用 户 的 认同 感 ， 满 足 用 户 的 情感 需求 ， 并 且 
能 够 告诉 用 户 当前 所 处 的 位 置 以 及 下 一 步 应 该 怎么 做 。 例 如 ， 我 们 在 平时 订 咖 啡 外 卖 的 时 
候 ， 选 择 咖啡 规格 时 都 会 展示 一 张 精 美的 产品 图 ， 如 下 图 所 示 : 


Luckin coffee 
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通过 精美 的 图 片 为 用 户 营 造 更 强 的 代入 感 ， 像 是 在 咖啡 馆 里 品尝 一 杯 醇 美 咖啡 ， 并 且 能 告 
诉 用 户 当前 正在 点 一 杯 美式 咖啡 ， 用 户 可 以 按照 自己 的 口味 在 规格 列表 中 进行 筛选 ， 最 终 
完成 选择 。 


加 分 项 : 流畅 的 动 效 


流畅 的 动 效 无 疑 是 表单 设计 的 加 分 项 ， 通 过 动 效 交互 能 增加 表单 切换 的 趣味 性 ， 并 且 
能 够 让 用 户 更 加 专注 于 当前 的 操作 。 动 效 还 可 以 帮助 表单 设计 更 好 地 进行 实时 反馈 ， 
吸引 用 户 的 注意 力 。 例 如 ， 我 们 在 进行 某 项 交互 操作 的 时 候 会 隐藏 掉 其 他 元 素 ， 用 户 
就 会 更 专注 于 当前 操作 ; 而 完成 这 一 项 操作 之 后 ， 会 结合 动 效 自动 弹出 其 他 选项 供用 
户 选择 。 


图 片 来 源 于 Virgil Pana 


画 重点 
( 1 ) 表单 设计 的 重要 性 : 表单 设计 是 用 户 与 产品 对 话 的 重要 途径 之 一 ， 优 秀 的 表单 设计 
能 够 帮助 用 户 提高 数据 录入 的 效率 、 容 错 率 ， 进 而 提高 整个 产品 的 用 户 留存 。 


(2 ) 提升 表单 用 户 体验 的 四 个 关键 步骤 : 首先 是 优化 信息 层级 ; 其 次 是 为 用 户 提供 便捷 
的 操作 流程 ， 减 少 不 必 要 的 操作 ; 再 者 ， 在 录入 表单 的 时 候 需 要 对 用 户 的 行为 进行 及 时 反 
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泪 


; 最 后 ， 表 单 设计 应 符合 用 户 当前 的 使 用 场景 ， 能 够 满足 用 户 的 情感 需求 。 


( 3 ) 动 效 是 表单 设计 的 加 分 项 ， 合 理 运用 动 效 设计 能 够 增加 页 面 的 趣味 性 ， 并 且 使 用 户 
更 加 专注 于 当前 的 操作 。 


参考 资料 
把 一 个 表单 设计 到 极致 是 怎样 一 种 体验 ? https://www.jianshu.com/p/06f1c20fde29 


拒绝 boring， 一 次 表单 设计 探索 https://www.jianshu.com/p/8b06271adf16 
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04 怎么 样 的 临 慕 才 最 有 效 


文 / 吴 荫 


在 日 常生 活 中 如 果 我 们 要 学 习 一 项 新 的 技能 时 ， 都 会 选择 从 模仿 开始 ， 模 仿 其 他 在 这 方面 
做 得 好 的 人 。 例 如 学 美术 时 ， 刚 开始 很 长 一 段 时 间 都 是 去 临摹 大 师 的 作品 ， 模 仿 他 们 的 画 
法 ， 等 到 一 定 的 阶段 才 开始 写生 ， 照 着 实物 画 。 在 写生 时 会 不 自觉 用 到 临 募 时 积累 的 方 
法 ， 遇 到 不 会 画 的 物品 时 ， 也 会 再 回 过 头 去 临摹， 循环 往复 ， 最 终 找到 适合 自己 的 风格 。 
这 个 过 程 根据 个 人 能 力 有 长 有 短 ， 但 是 每 个 人 都 必须 经 历 无 法 避免 。 


在 做 UI 的 时 候 ， 我 发 现 也 和 上 述 过 程 有 很 多 异曲同工 之 处 。 前 期 都 是 需要 去 大 量 临 摹 
好 看 的 页 面 ， 然 后 记忆 ， 形 成 条 件 反射 ， 化 为 己 用 ， 再 形成 自我 独特 的 风格 。 但 很 多 新 
手 在 入 行 之 初 ， 完 全 忽略 了 这 点 ， 拿 到 原型 之 后 ， 一 味 地 想 自我 创新 ， 页 面 布 局 、 字 体 
大 小 、 间 距 等 都 没有 深入 去 研究 ， 完 全 赁 着 感觉 来 。 这 样 做 不 好 也 实 属 正常 。 


国人 为 形成 
已 用 自我 风格 


那 怎么 改善 这 一 情况 呢 ? 我 有 一 个 自己 的 小 办 法 : 回归 原始 从 临 幕 优秀 作品 开始 ， 慢 慢 积 
累 再 形成 自己 的 设计 风格 。 


怎么 找 临 幕 素 材 


临摹 最 重要 的 就 是 找 素材 ， 素 材 的 好 坏 直接 影响 到 后 期 的 效果 。 建 议 临 摹 线 上 App， 线 上 
App 的 页 面 在 落地 前 经 过 很 多 人 的 打磨 ， 特 别 是 那些 大 公司 的 App， 多 去 临摹 并 从 中 总 
结 出 规律 所 在 。 
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临摹 四 步 曲 


很 多 人 临摹 的 时 候 ， 总 喜欢 比照 着 原 图 进行 “描摹 ”， 但 这 样 的 成 效 有 限 ， 没 有 经 过 
太 多 的 思考 。 我 建议 可 以 描摹 完 之 后 再 凭借 记忆 画 一 遍 ， 画 完 之 后 再 比照 着 原 图 进行 
修改 。 


在 临摹 时 也 需要 有 侧重 点 ， 可 以 先 从 图 标 开 始 ， 然 后 再 扩展 到 布局 、 字 号 、 间 距 等 ， 逐 个 
击破 。 之 所 以 推荐 从 图 标 开始 ， 是 因为 它 是 每 个 App 中 不 可 或 缺 的 ， 画 不 好 会 直接 导致 
页 面 不 精细 ， 没 有 细节 ， 而 画 得 好 的 话 也 能 直接 提升 页 面 质感 。 


1. 图 标 
初期 只 需要 单一 地 临摹 图 标 ， 不 过 需要 注意 的 是 不 要 只 临摹 一 两 个 ， 而 要 整套 临 幕 ， 一 两 
个 图 标 看 不 出 来 整体 性 ， 而 UI 界面 上 的 图 标 也 是 整套 出 现 ， 不 会 单独 存在 。 


© OOo0eL 
© OQ ge 
© © Oe 
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过 程 中 也 要 有 意识 地 找 一 些 当前 不 会 画 的 、 和 之 前 风格 不 一 样 的 图 标 ， 扩 展 宽度 以 及 转换 
思维 ， 不 要 把 自己 限制 在 一 个 局 限 的 空间 里 。 


» 7 2 YY 
时 局 日 @ 号 


等 手头 功夫 练 到 一 定 阶段 的 时 候 ， 再 去 和 页 面相 结合 。 前 期 练 手头 功夫 很 重要 ， 相 当 于 打 
地 基 ， 单 纯 的 临摹 图 标 会 让 你 更 在 意图 标本 身 ， 如 它们 是 否 和 原 图 一 致 ， 怎 么 画 才 最 方便 
最 快速 等 。 


如 果 一 开始 就 临摹 一 整个 页 面 ， 就 会 过 多 地 去 关注 页 面 ， 而 忽略 了 图 标的 细节 。 举 个 例 
子 ， 下 图 两 个 页 面 第 一 眼看 到 的 肯定 是 整体 的 页 面 风格 、 调 性 怎么 样 ， 看 完 之 后 可 能 还 会 
觉得 这 两 个 页 面 是 一 样 的 ， 没 有 区 别 。 


ee9009 O00o0o0 


猜 你 喜欢 m 猜 你 喜欢 ws» 
慌 3 本 2 
* © * @ 

页 面 1 页 面 2 


但 其 实 并 不 是 ， 注 意 看 一 下 导航 栏 上 的 图 标 ， 它 们 在 细节 上 有 很 多 不 一 样 。 页 面 1 的 3 个 图 
标 描 边 粗细 、 大 小 都 不 一 致 。 而 页 面 2 是 调整 后 的 ， 看 起 来 整体 统一 很 多 。 这 些小 细节 在 
整体 页 面 中 很 容易 忽视 ， 但 是 当 把 它们 单 擒 出 来 时 ， 就 很 容易 发 现 问题 所 在 了 。 


名 国 总 人 旬 由 局 
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以 上 只 是 列举 的 一 个 小 例子 ， 在 实际 工作 中 还 有 很 多 ， 所 以 建议 先 临摹 整套 图 标 ， 把 一 整 
套图 标 放 到 一 起 ， 看 看 是 否 统一 


2. 页 面 

当 第 一 步 攻 克 的 时 候 ， 就 可 以 到 下 一 步 临 摹 整套 页 面 了 。 去 找 几 个 线 上 的 图 标 多 的 页 面 ， 
最 常见 的 就 是 个 人 中 心 页 面 以 及 视频 类 App 的 频道 页 。 临 摹 整 个 页 面 时 就 要 多 去 注意 图 
标 和 页 面 风格 是 否 一 致 、 图 标 和 字体 是 否 匹 配 等 。 
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3. 分 析 总 结 


临摹 完了 之 后 ， 要 学 会 总 结 。 例 如 个 人 中 心 图标 一 般 多 大 、 配 多 大 的 文字 以 及 颜色 等 ， 
不 然 久 了 之 后 就 都 忘 了 ， 白 临摹 了 。 例 如 拿 刚 刚 京东 金融 和 陌 陌 的 页 面 举例 : 京东 金 
融 是 40 x 40px 的 图 标 配 32px 的 文字 ，cell 的 高 度 是 100px ( 文中 测量 数值 仅 代表 本 
人 观点 ) 。 


会 员 中 心 全 到] 100 金币 1 
国 我 的 银行 卡 
国 我 的 卡 券 我 的 优惠 券 、 会 员 卡 
京东 金融 


而 陌 陌 是 48 x 48px 的 图 标 配 36px 的 文字 ，cell 的 高 度 是 100px。 


> 国会 员 中 心 本 io 莹 通用 记 
国 陌 隔 钱 包 
国 游戏 中 心 

陌 陌 


再 对 比 两 个 产品 ， 你 会 发 现 虽 然 它 们 的 字号 和 图 标 大 小 不 一 样 ， 但 是 它们 的 cell 高 度 都 是 
100px， 那 下 次 自己 做 的 时 候 就 可 以 优先 尝试 100px 的 cell 高 度 。 这 样 等 积累 的 素材 够 
多 时 ， 自 己 再 做 页 面 的 时 候 就 心中 有 谱 了 。 


再 额外 扩充 一 点 ， 两 个 App 中 图 标 距离 文字 和 图 标 距离 页 面 边 距 是 一 样 大 的 ， 一 个 都 是 
32px， 一 个 都 是 30px。 


京东 金融 陌 陌 


按照 我 们 正常 的 理解 ， 肯 定 是 图 标 距离 文字 更 近 点 ， 为 什么 这 两 个 App 是 一 样 的 呢 ? 是 
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不 是 所 有 的 App 都 是 这 样 的 ? 这 个 时 候 我 们 就 可 以 再 多 去 截图 几 个 案例 加 以 对 比 。 如 下 
图 虾米 音乐 的 间距 一 个 是 48px， 一 个 是 28px， 图 标 到 文字 的 距离 小 于 页 边 距 。 


习 峡 ?会 中 心 。 
团 任务 中 心 。 


图 养生 米 。 


虾米 音乐 


得 到 的 间距 一 个 是 36px， 一 个 是 28px， 图 标 到 文字 的 距离 也 小 于 页 边 距 。 


必 国 我 的 优惠 券 
团 已 下 载 音频 6 
推荐 「 得 到 」 给 好 友 
© 好 友和 到 优惠 和 
得 到 
那么 就 可 以 大 致 得 出 一 个 结论 : 图 标 到 文字 的 距离 小 于 或 者 等 于 页 边 距 ， 而 不 能 大 于 页 
边 距 。 


小 因 我 是 文字 >e@ 


在 这 里 只 是 给 大 家 提供 一 个 思路 ， 在 临摹 的 时 候 遇 到 任何 问题 ， 觉 得 不 对 劲 的 地 方 ， 都 可 
以 再 多 去 找 几 个 App 进 行 对 比 ， 从 中 找到 规律 所 在 。 当 这 些 规律 是 你 自己 总 结 出 来 的 ， 而 
不 是 别人 直接 告诉 你 的 时 候 ， 印 象 也 会 更 加 深刻 。 


4. 举一反三 


1) 颜色 
当 总 结 完 图 标的 大 小 以 及 间距 、 字 体 等 之 后 ， 其 实 还 有 一 个 很 关键 的 元 素 需要 注意 ， 那 就 
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是 图 标的 颜色 。 颜 色 非 常 能 体现 一 个 App 的 气质 ， 一 套 经 典 的 配色 能 让 人 一 眼 认 出 来 ， 
而 颜色 最 重要 的 一 点 就 是 需要 和 产品 的 调 性 相符 合 。 如 下 图 所 示 ， 作 为 金融 类 产品 ， 京 东 
金融 配色 就 很 稳重 ， 而 陌 陌 的 配色 就 更 年 轻 、 活 泼 。 


@e@eeg@g@:= 
ee@e@@g@- 


平时 可 以 多 积累 几 套 配色 ， 培 养 自己 的 色彩 感觉 。 也 可 以 尝试 在 临摹 完 一 套图 标的 时 候 ， 
重新 给 它们 配 一 套 颜色 。 你 会 发 现 当 颜色 改变 的 时 候 ， 图 标 整体 的 感觉 也 截然 不 同 。 


目 2 号 于 
gg@@ ® 


DD 人 9 


当然 你 也 可 以 尝试 用 同一 套 配 色 去 设计 不 同 的 图 标 造 型 ， 尽 情 去 尝试 你 觉得 想 做 的 方向 ， 
你 会 发 现 很 有 意思 。 在 这 过 程 中 你 也 会 感悟 到 很 多 。 


祥 6 日 骆 六 
品 全 (©) 辐 
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2) 概念 稿 

总 是 做 一 些 线 上 的 落地 稿 的 时 候 ， 难 免 会 限制 自己 的 思维 ， 所 以 我 们 需要 做 一 些 概念 稿 ， 
放飞 一 下 自我 。 例 如 在 临摹 完 一 张 页 面 的 时 候 ， 可 以 基于 这 个 页 面 的 功能 自己 重 构 一 个 ， 
这 样 的 好 处 是 页 面 功 能 可 以 落地 ， 同 时 也 能 锻炼 自己 的 产品 思维 。 


《六 快手 晚餐 闻 } 火 腿 肠 滑 
看 西 兰花 
全 全 分 。 4 人 最 过 7 天 全 {ED Three people's menu 
ee 
| eos © 
> 
用 料 百 王 进 某 和 尖子 多 Oranges of oranges 
© © mre 
线 上 概念 稿 


画 重 点 


工作 得 越久 ， 越 会 发 现 UI 是 有 规律 可 循 的， 只 要 平时 你 多 注意 、 多 积累 ， 一 步 一 个 脚 
印 ， 技 法 只 要 肯 花 时 间 都 能 学 会 。 越 到 后 面 看 的 其 实 是 思维 方式 ， 善 于 思考 的 人 ， 总 能 从 
过 往 的 经 历 里 总 结 出 一 套 方法 论 。 


刚 入 行 的 读者 也 不 要 着 急 ， 先 从 临摹 开始 ， 从 临摹 一 个 图 标 到 一 整套 图 标 、 再 到 整个 界 
面 ， 慢 慢 循 序 渐进 ， 总 会 有 做 好 的 那 一 天 。 
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05 设计 稿 如 何 自 查 


文 / 吴 荫 


在 设计 过 程 中 ， 设 计 师 很 容易 陷入 到 某 一 个 细节 中 ， 对 其 他 细节 和 整体 就 忽视 了 。 这 个 时 
候 就 需要 在 交 稿 前 ， 对 设计 稿 进行 自 查 ， 把 一 些 低 级 的 错误 扼杀 在 摇篮 中 。 


自 查 内 容 大 致 分 为 两 类 ， 一 是 设计 稿 本 身 ， 二 是 与 其 他 页 面 的 统一 性 。 在 这 里 有 个 建议 ， 
当 设 计 稿 做 完 的 时 候 ， 先 搁置 一 段 时间 ， 稍 后 再 检查 。 


设计 稿 本 身 


检查 设计 稿 本 身 指 的 是 就 当前 页 面 检查 所 存在 的 问题 ， 错 误 包括 没 对 齐 、 图 标 风 格 和 大 小 
不 统一 、 间 距 过 大 过 小 、 文 字 对 比 不 明显 、 图 片 没有 铺 满 等 。 


1. 对 齐 


页 面 上 的 元 素 必须 有 对 齐 的 方式 。 左 对 齐 、 右 对 齐 、 居 中 对 齐 都 可 以 ， 但 一 定 要 有 了 明显 的 
能 被 人 一 眼看 出 来 的 对 齐 方 式 ， 不 然 就 会 让 人 觉得 页 面 上 的 元 素 是 随意 放置 的 。 
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自 查 的 时 候 首先 要 注意 那些 明显 没 对 齐 的 地 方 。 为 了 方便 大 家 看 清楚 差别 ， 所 以 示意 图 稍 
微 夸张 了 点 ， 实 际 大 多 是 一 两 个 像素 没 对 齐 。 


2. 图 标 


1) 风格 
检查 一 下 图 标的 风格 是 不 是 一 样 ， 例 如 面 性 的 就 都 是 面 性 的 ， 线 性 的 都 是 线性 的 。 


2 ) 大 小 

大 小 主要 指 的 是 图 标 在 页 面 中 的 比例 大 小 在 视觉 层面 上 是 否 合 适 ， 有 些 时 候 图 标本 身 风 
格 、 样 式 都 没什么 问题 ， 但 就 是 跟 页 面 其 他 元 素 相 比 太 大 或 者 太 小 了 。 还 需要 注意 一 点 ， 
物理 大 小 一 样 不 代表 视觉 大 小 也 一 致 ， 优 先 满足 视觉 大 小 一 致 。 


目 订单 日 订单 
起 je 全 消息 
从 在 线 客服 们 ”在 线 客服 
© un © iaE 
® © 


左边 的 图 标 单个 看 没什么 问题 ， 但 和 文字 放 一 起 ， 图 标 就 显得 整体 大 了 很 多 ， 看 起 来 极其 
不 协调 。 而 右边 就 看 起 来 般配 一 点 。 


3. 间距 

间距 是 用 来 区 分 层级 的 ， 间 距 的 大 与 小 或 多 或 少 会 影响 到 这 一 点 。 正 如 《 写 给 大 家 看 的 设 
计 书 》 中 所 说 的 亲密 性 一 样 ， 区 分 层级 的 本 质 也 就 是 区 分 亲密 性 ， 页 面 上 间距 最 小 的 亲密 
性 最 强 ， 属 于 同一 层级 ; 页 面 上 间距 最 大 的 亲密 性 最 弱 ， 不 属于 同一 层级 。 
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0 @、 亲 宪 性 强 
回回 亲密 性 弱 


自 查 的 时 候 需 要 着 重 看 一 下 ， 信 息 层级 是 否 区 分 开 了 ， 例 如 两 个 模块 之 间 的 间距 一 定 要 大 
于 模块 内 部 的 间距 。 


:0 

i@ 
人 @@ 模块 内 部 间距 
@@ ”模块 与 模块 间距 
9<e 


4. 对 比 

区 分 层级 除了 通过 间距 还 可 以 通过 对 比 ， 对 比 的 方式 、 种 类 有 很 多 种 ， 这 里 就 不 一 一 展开 
了 ， 只 讲 文字 间 的 颜色 对 比 。 以 讨论 区 为 例 ， 讨 论 区 一 般 包 含 用 户头 像 、 昵 称 、 时 间 、 评 
论 内 容 以 及 一 些 辅助 的 功能 ， 如 点 赞 、 收 藏 、 评 论 、 回 复 等 。 


下 图 中 喜马拉雅 和 网 易 新 闻 两 者 相 比 起 来 ， 就 信息 层级 来 说 ， 网 易 新 闻 区 分 得 更 开 一 点 ， 
层级 更 明确 。 
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无 SM 卡号 2059 oo 
者 所 有 评论 (177) 
Ene 
差点 以 为 手机 出 问题 了 。 开 头 真 然 没 声 
音 。 


[1 

星 克 qo: 调 了 半天 的 音量 ， 结 果 突 做 一 疡 把 
未 居 亚 了 

洒 要 于 作 :我 晴 着 也 机 的 ， 结 条 


顾 一 仿 爱 你 : 压 死人 
查看 全 部 30 革 回复 


导 旧 .ktdl 
史上 最 长 最 无 聊 开 场 ，，， 
a 


小 相当 : 这 是 有 视频 直播 的 ， 所 以 开场 才 是 
这 村 的 


Pusafsoobtzzo5: 者 


caesarrey 


喜马拉雅 


£95% mm 


热门 跟 贴 
下 mcblai 
机 动车 请 继续 背 锅 名 
6 有 三 到 网 友 07ne3R 
下 雨 就 好 了 
rss 
有 专 大 网 丰 07ne3R 
下 雨 就 好 了 
刮 几 次 大 风 估 计 就 蓝天 白云 了 ， 至 少 5 
级 以 上 的 
火星 网友 


我 们 渴望 有 个 健康 的 空气 环境 。。 


网 易 新 闻 


而 去 对 比 它们 页 面 所 使 用 的 颜色 ， 就 可 以 发 现 ， 网 易 新 闻 的 颜色 对 比 度 更 大 ， 对 比 度 大 ， 


信息 自然 而 然 就 更 明显 了 。 


昵称 


[| 
cz> 
[| 


@ #666666 28px 


#000000 30px 
566 国 

我 是 文字 文字 文字 #333333 28px 行 高 

40px 

啦 哄 啦 : 我 的 


喜马拉雅 


© B88EE 28px 图 
1 有 态度 加 
#333 36px 


我 是 文字 文字 #333333 36px 默认 行 高 
50px 


网 易 新 闻 


我 们 在 交付 前 设计 自 查 时 ， 就 需要 着 重 检查 一 下 页 面 的 信息 是 否 区 分 开 了 ， 对 比 度 是 否 


合理 。 这 一 点 算 比 较 深层 次 的 自 查 了 ， 新 手 可 能 很 难 发 现 问题 ， 这 时 候 可 以 去 寻求 他 人 
的 帮忙 。 
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5. 图 片 
在 Sketch 里 ， 大 家 都 是 画 一 个 矩形 ， 然 后 和 图 片 一 起 做 成 蒙 版 ， 但 有 时 候 会 出 现 图 片 没 
有 铺 满 整 个 矩形 的 情况 ， 如 下 图 所 示 : 


图 片 来 源 于 网 络 


有 时 候 图 片 比较 小 〈 例如 头像 ) ， 手 机 预览 的 时 候 不 容易 被 看 到 ， 所 以 在 自 查 的 时 候 最 好 
把 设计 稿 放大 查看 细节 。 


页 面 统一 性 


页 面 统一 性 指 的 是 App 整体 的 统一 性 ， 如 输出 的 设计 稿 是 否 和 之 前 统一 ， 同 时 输出 的 几 
个 页 面 是 否 统一 等 。 这 个 时 候 就 需要 跳出 单个 页 面 ， 来 看 整体 了 。 最 容易 出 错 的 问题 有 : 
两 个 页 面 同一 位 置 的 元 素 位置 出 现 偏 移 、 分 割 线 颜色 不 一 样 、 按 钮 的 圆 角 度 不 统一 等 。 


1. 位 置 偏 移 
很 多 人 做 设计 图 的 时 候 ， 都 是 计算 机 连 着 手机 实时 预览 ， 预 览 软 件 在 翻 页 的 时 候 ， 是 直接 
出 现 新 的 页 面 ， 不 是 那 种 一 页 一 页 翻 的 形式 。 所 以 当 元 素 位 置 发 生 偏 移 的 时 候 ， 纯 靠 手机 
预览 很 难 发 现 。 
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同一 元 素 位 置 发 生 偏 移 


至 于 解决 方案 也 很 简单 ， 只 需要 自 查 的 时 候 ， 把 所 有 图 按照 顺序 导出 ， 全 部 选中 进行 预 
览 ， 这 个 时 候 页 面 元 素 偏 移 的 话 ， 在 翻 页 过 程 中 就 会 极其 明显 。 发 现 有 出 错 的 地 方 ， 就 重 
新 修改 再 导出 ， 直 至 没有 问题 为 止 。 


2. 分 割 线 


分 割 线 也 是 一 个 极 易 出 错 的 地 方 ， 特 别 是 最 开始 做 的 时 候 没 有 定义 分 割 线 的 颜色 ， 随 便 用 
一 个 ， 后 续 觉 得 不 好 又 改 了 ， 改 得 又 不 彻底 ， 有 些 地 方 没 改 到 。 加 上 分 割 线 颜色 普遍 偏 


浅 ， 不 仔细 看 很 难 发 现 。 


分 割 线 颜色 不 一 至 


自 查 的 时 候 这 一 项 通过 翻 页 预览 发 现 后 也 能 修改 ， 不 过 还 有 一 个 更 好 的 办 法 : 从 源头 改 
变 。 前 期 把 分 割 线 都 做 成 Symbols， 统 一 套用 ， 后 期 自 查 的 时 候 ， 只 需要 检查 分 割 线 是 
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否 用 的 是 Symbols 即 可 ， 是 的 话 颜 色 肯 定 是 一 样 的 。 


3. 按钮 圆 角 度 
检查 不 同 页 面 的 按钮 圆 角度 是 否 一 致 ， 不 一 致 的 地 方 要 统一 。 定 好 规范 之 后 ， 后 续 所 有 的 
页 面 都 需要 延续 。 


按钮 圆 角度 不 一 样 


画 重点 


在 设计 稿 输出 交付 前 ， 设 计 师 需要 对 自己 的 设计 稿 先 自 查 一 遍 ， 避 免 出 现 低级 错误 。 不 然 
这 些 错误 每 次 都 等 别人 发 现 ， 会 影响 你 在 团队 中 的 形象 。 


自 查 主要 分 两 个 方面 ， 一 个 是 设计 稿 本 身 ， 需 要 注意 页 面 元 素 对 齐 、 图 标 风格 和 大 小 与 页 
面 整 体 搭配 、 间 距 要 能 体现 亲密 性 、 文 字 对 比 要 明显 ; 二 是 页 面 整体 的 统一 性 ， 需 要 注意 
的 是 避免 出 现 同一 元 素 在 不 同 页 面 位 置 发 生 偏 移 、 分 割 线 颜色 不 统一 、 按 钮 的 圆 角度 不 统 
一 等 。 
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06 ”如何 准备 一 份 合 格 的 作品 集 


文 / 付 铂 刺 


作品 集 对 于 设计 师 是 至 关 重要 的 ， 当 我 们 另 谋 高 就 时 ， 可 能 会 出 现 以 下 的 状况 : 没 作品 、 
没有 线 上 的 作品 、 还 原 度 不 够 等 ， 紧 接着 就 是 一 味 地 抱怨 诉苦 ， 埋 怨 自 己 没有 遇 到 好 的 平 
台 ， 没 有 遇 到 一 个 重视 设计 的 好 老板 ， 没 有 好 的 产品 经 理 ， 没 有 可 以 实现 自己 设计 的 好 开 
发 者 等 ， 其 实 应 该 先 从 自己 入 手 解决 问题 。 


作品 集 准备 周期 要 6 个 月 ? 


我 们 可 以 回想 下 ， 每 次 身边 人 在 问 你 有 没有 准备 作品 集 时 ， 是 不 是 都 有 过 类 似 的 回答 : 
“我 还 没 打算 换 工 作 ， 等 要 换 的 时 候 再 准备 吧 ! ” 亦 或 是 “现在 手 上 的 作品 都 不 太 满意 ， 
等 我 改 到 满意 的 时 候 再 开始 准备 。” 其 实 这 些 都 是 借口 ， 我 们 对 优秀 作品 集 需要 的 时 间 的 
没有 概念 ， 才 会 一 拖 再 拖 。 我 们 要 清楚 准备 作品 集 就 和 期 末 考 试 一 样 ， 没 有 前 半年 的 学 
习 ， 只 靠 一 两 周 的 突击 是 不 会 有 好 成 绩 的 。 所 以 ， 我 认为 一 个 优秀 作品 集 的 准备 周期 最 低 
要 用 半年 的 时 间 。 接 下 来 我 会 通过 三 点 说 明 为 什么 我 们 要 准备 6 个 月 。 


1. 设计 依据 

准备 作品 集 不 仅 要 从 平日 的 设计 稿 中 挑选 精品 集合 起 来 ， 还 要 对 每 一 个 我 们 自己 觉得 好 的 
地 方 做 出 设计 说 明 。 因 为 面试 官 也 会 通过 作品 的 内 容 提 出 很 多 专业 性 的 问题 ， 所 以 整理 作 
品 集 的 过 程 也 是 我 们 对 项 目 再 次 认 知 的 过 程 。 通 常 我 们 会 在 界面 附近 加 入 一 些 设计 依据 和 
产品 概述 等 文字 ， 充 分 体现 出 自身 对 专业 知识 的 理解 和 运用 。 对 于 作品 集 而 言 ， 创 作 作品 
时 的 调查 研究 过 程 与 完成 的 作品 本 身 同 样 重要 ， 如 下 图 所 示 : 
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HOME PAGE 


历史 订单 


主要 工作 : 掌握 基本 的 设计 理论 ， 了 解 产品 思路 ， 可 以 完整 并 流畅 地 说 出 设计 依据 。 为 了 
体现 表达 的 逻辑 性 ， 还 需要 提高 文字 的 书写 能 力 。 


2. 反复 更 改 


在 整理 作品 集 的 时 候 ， 由 于 每 套 作品 创作 的 时 间 周 期 不 同 ， 即 便 是 自己 的 设计 作品 ， 也 会 
因 时 间 差 导致 设计 质量 的 不 同 。 所 以 ， 需 要 我 们 不 定期 进行 维护 来 保证 作品 放 入 作品 集 后 
会 拉 低 整体 的 分 数 。 对 于 维护 的 范围 那 就 很 广 了 ， 可 以 是 目前 的 项 目 ， 也 可 以 是 之 前 的 
目 ， 甚 至 已 经 死 掉 的 项 目 。 如 果 你 觉得 这 是 你 喜欢 的 或 者 是 可 以 体现 你 想法 的 项 目 ， 就 
J 以 自己 去 优化 迭代 ， 变 成 自己 的 作品 ， 如 下 图 所 示 : 


澡 让 


可 


1 加 用 介绍 


(A 
RAT 


上 其他 用 户 也 下 考 了 


SE En BR a 
2017 年 设计 的 应 用 市 场 2018 年 设计 的 应 用 市 场 
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主要 工作 : 回顾 往 期 项 目 需求 ， 合 理 更 改 界面 模块 的 内 容 ， 定 期 对 已 有 界面 进行 更 新 
维护 。 


3. 时 间 碎 片 化 

了 解 上 面 两 点 后 ， 可 能 有 些 人 还 是 会 认为 半年 的 时 间 太 久 了 。 但 是 要 知道 的 是 ， 大 部 分 人 的 
作品 集 都 是 利用 碎片 化 时 间 去 做 的 ， 我 们 可 以 做 道 数 学 题 求证 一 下 ， 半 年 到 底 有 多 长 时 间 是 
用 来 做 作品 集 的 。 理 想 一 点 ， 我 们 每 天 抽出 2 个 小 时 来 整理 作品 集 ，180 天 大 约 需要 360 个 
小 时 ，360 二 24 = 15 天 ， 当 然 每 天 24 小 时 作 图 不 现实 。 我 们 再 把 时 间 分 一 下 ， 一 天 8 小 时 
工作 ，360*+ 8=45 天 。 所 以 看 似 准备 半年 的 作品 集 ， 实 际 上 我 们 也 只 用 了 45 天 而 已 。 


拯救 线 上 作品 


很 多 人 都 抱怨 过 自己 公司 的 项 目 不 成 熟 ， 最 终 线 上 展示 效果 和 设计 图 相差 甚 远 等 问题 。 几 
年 过 去 后 ， 作 品 集 里 依然 没有 线 上 稿 的 存在 ， 只 有 自己 的 平日 练习 。 线 上 稿 的 效果 不 佳 一 
直 以 来 都 是 很 难 解 决 的 问题 ( 大 公司 的 部 分 应 用 除外 ) ， 造 成 这 一 现象 的 因素 太 多 。 但 是 
我 们 不 能 无 所 作为 ， 我 们 要 从 自身 改变 。 以 下 3 点 可 以 帮助 你 提升 线 上 稿 的 效果 ， 让 作品 
集 更 完善 。 


1. 端正 心态 

认 清 自己 的 能 力 是 至 关 重 要 的 ， 我 发 现 很 多 人 平日 里 练习 的 设计 稿 都 要 比 在 公司 的 设计 好 
很 多 ， 我 自己 也 是 一 样 。 这 是 因为 自己 做 的 时 候 可 以 天 马 行 空 ， 还 可 以 用 漂亮 的 图 片 做 拱 
配 。 后 来 我 想 明 白 了 ， 这 些 都 是 客观 的 原因 ， 主 观 原因 是 我 们 在 做 公司 产品 的 设计 时 ， 无 
意 间 带 上 了 “完成 任务 ”的 心态 。 可 能 很 多 人 都 觉得 即便 设计 做 得 再 好 都 不 会 有 好 的 效 
果 ， 所 以 没有 全 力 以 赴 地 做 公司 的 产品 ， 设 计 能 力 平平 ， 长 时 间 没 有 突破 自我 ， 只 会 严重 
影响 自己 的 设计 生涯 。 

总 结 : 全 力 以 赴 地 做 公司 产品 ， 即 便 有 时 需求 确实 不 合理 ， 那 么 我 们 也 要 尽 可 能 地 在 不 合 
理 的 需求 下 做 到 好 看 。 不 要 懒惰 ， 一 版 不 好 就 再 来 一 版 ， 只 会 越 来 越 好 。 


2. 节省 开发 时 间 
当 我 们 提出 线 上 效果 不 好 时 ， 经 常 听 到 的 原因 是 开发 时 间 不 够 用 ， 无 法 达到 我 们 效果 图 的 
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预期 效果 。 可 是 ， 我 们 有 没有 思考 过 开发 时 间 不 够 用 的 原因 会 不 会 和 我 们 有 直接 关系 呢 ? 
例如 设计 不 合理 、 切 图 不 规范 、 标 注 错乱 等 问题 ， 增 加 了 工程 师 的 工作 难度 ， 导 致 开发 效 
率 降低 。 所 以 ， 我 们 必须 有 意识 地 在 我 们 的 职责 范围 内 去 解决 本 该 属于 我 们 的 工作 ， 来 节 
省 开发 的 时 间 。 

例如 ， 设 计 界 面 时 ， 考 虑 不 同 机 型 的 适 配 问 题 ; 标注 清晰 ， 有 详细 的 备注 说 明 ; 切 图 规 


范 ， 学 会 给 文件 夹 分 类 起 名 等 ， 这 些 看 似 小 的 细节 ， 却 可 以 帮助 工程 师 们 大 大 提高 工作 效 
率 ， 提 高 落地 后 的 设计 效果 ， 如 下 图 所 示 : 


pp 二 ed 
| 历史 记录 
| 后 
A i 区 
中 国有 大 这 后 和 公主 


关 国 无 运营 机 afaf 渭 斌 天 人 机 入 
"A ers 人 


【首发 】“ 小 日 子 科技 "完成 Pre- 
| MB 讽 更生 江 的 [2 + 
中 
站 xxx + 
二 :马云 和 百联 是 守信 各 
师 物 ”; 陆 多 所 否认 为 "明天 系 . 


网 用 人 下水 的 B 经 on 了, 现在 
站 是 小 人 秋水 的 春天 | 法 先 钴 


标注 过 乱 标注 清晰 


总 结 : 掌握 各 平台 界面 的 适 配 问题 ， 多 站 在 开发 人 员 的 角度 去 思考 问题 ， 学 习 正确 的 标注 
和 切 图 。 


3. 制定 设计 规范 

任何 时 候 都 不 要 小 看 规范 的 力量 。 刚 刚 上 班 的 一 段 时 间 里 ， 我 不 会 做 设计 规范 ， 有 问题 直 
接 坐 到 工程 师 旁 边 指 指点 点 ， 看 似 非常 有 效率 ， 但 这 种 方式 的 沟通 成 本 是 很 大 的 。 当 面 对 
多 个 工程 师 同时 开发 不 同 模块 时 ， 设 计 规范 的 作用 就 显得 十 分 重要 了 。 我 们 可 以 把 工程 师 们 
组 织 起 来 ， 统 一 讲述 我 们 的 设计 规范 ， 让 工程 师 在 界面 开发 时 有 据 可 循 。 越 清晰 的 设计 规范 
越 能 减少 我 们 的 时 间 成 本 ， 同 时 界面 的 统一 性 也 会 越 高 。 
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头像 


80* 80 40*140 160* 160 208 * 208 

Feed 流 个 人 中 心 修改 调料 课程 
海报 

200* 112 250* 140 326 *184 
订单 列表 、 详 情 页 礼包 详情 页 商品 大 图 产品 列表 页 


关于 界面 中 的 图 片 规范 整理 


总 结 : 即便 公司 不 给 你 留 制作 设计 规范 的 时 间 ， 也 要 找 业余 时 间 去 完成 一 套 设计 规范 ， 哪 
怕 非 常 简易 ， 从 长 远 看 制作 设计 规范 的 时 间 也 要 小 于 日 后 的 沟通 时 间 。 


改版 思路 


上 面 的 三 点 都 可 以 帮助 我 们 优化 线 上 稿 。 当 然 ， 凡 事 都 有 例外 ， 所 以 我 们 不 得 不 留 有 一 
招 。 那 么 ， 当 线 上 产品 无 法 进行 优化 时 要 怎么 办 呢 ? 如 下 图 所 示 : 


?了 sg 了 | 入 二 | 沁 
4 8 


于 | 闪 说 自主 内 作 基 你 一 生 疫 和 过 这 


1 到达 福特 雪 宜兰 专业 个 so 最 新 车 展 
WB = DD Er pp 
2 好 玩 在 硅 里 ? 北京 层 监管 
1 二 i 的 者 sn 限时 优惠 Ems 四 


essrss 
EE 
[i 


线 上 稿 
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简单 来 说 ， 就 是 自己 做 改版 。 通 过 对 业务 需求 的 理解 ， 改 一 版 自己 满意 的 设计 稿 ， 也 可 以 
将 其 放 入 你 的 作品 集中 。 它 可 以 体现 你 的 专业 素养 、 自 我 追求 、 执 行 力 等 多 方面 的 素质 。 


画 重点 


作品 集 对 于 我 们 来 说 是 一 块 敲门砖 ， 是 面试 官 考察 设计 能 力 、 理 论 实践 的 重要 标准 。 因 
此 ， 我 们 必须 要 保证 无 论 是 在 做 什么 设计 都 有 一 颗 积 极 进取 的 心 ， 每 次 都 可 以 达到 自己 本 
该 实现 的 效果 。 比 起 抱怨 别人 ， 还 不 如 多 思考 一 下 如 何 对 自己 不 满意 的 线 上 稿 进行 改版 设 
计 更 实用 。 
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07 如何 输 出 一 份 完 整 的 测试 题 


文 / 付 铂 环 


许多 刚 入 行 的 设计 师 拿 着 公司 发 来 的 面试 题 一 筹 莫 展 ， 有 些 题 觉得 做 得 太 差 ， 需 要 重 
改 ; 有 些 题 觉 得 已 经 做 得 很 好 了 ， 不 需要 改动 ， 但 也 要 去 硬 改 。 拿 到 面试 题 后 我 们 到 底 
该 如 何 面 对 呢 ? 考官 的 预期 又 是 什么 呢 ? 下 面 结合 个 人 经 验 来 说 说 拿 到 面试 题 后 的 六 个 
关键 步骤 。 


竞 品 分 析 


知己 知 彼 ， 才 能 百 战 不 殉 。 当 我 们 拿 到 面试 题 时 ， 如 果 是 线 上 产品 改版 ， 请 务必 下 载 该 产 
品 同类 App 中 的 佼佼 者 进行 简易 的 竞 品 分 析 ( 考虑 到 竟 品 分 析 时 间 过 长 ， 所 以 可 以 选 出 
几 点 来 做 对 比分 析 即 可 ) 。 如 下 图 ， 如 果 改 版 的 是 一 款 资讯 类 App， 可 以 下 载 多 个 同类 产 
品 进行 对 比 ， 如 下 图 所 示 : 


Cr + 全 下 于 452 7 
G 


名 四 钢 易 
关注 推荐 热点 北京 视频 新 时 人 三 头条 5 视频 要闻 。 娱乐 ”体育 三 
51.87 亿 元 易 主 ! 北京 盘古 。 二 “一 一 旺 登 录 ， 推 下 内 外 更 精彩 本 条 x 
大 观 " 龙 首 "成 功 拍 责 

ug 台积电 2nm 工 艺 制程 研发 启 


动 ， 最 快 2024 年 投产 ，Im， 


今明 雷阵雨 来 剧 存 在 感 ! 北 攻 
京 真 凉快 还 得 等 到 一 一 


新 iPhone 九 月 发 布 ， 环 顾 四 

周 ， 却 发 现 友 商 都 已 换 上 

内 地 周 票房: 《 哪 IE》 破 41 3 
de 新 能 源 车 电池 将 迎 ' 进 役 湖 。 鞠 


20 万 吨 旧 电池 怎么 处 理 


束 面 肛 到 底 有 用 没 用 ? 皮肤 科 医 生 揭穿 刘 
ed ite Re 北京 出 发 ， 大 家 爱 住 树 屋 民 奏 ， 真 是 美 一 


EE 了 ， 人 均 88 元 起 
这 六 


航拍 重庆 两 江 交 汇 现 “各 光 锅 "景观 一 清 一 
浊 " 泾 油分 明 ” 
aA CD oO 外 


EE a 


今日 头条 网 易 新 闻 


中 四 
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我 们 可 以 总 结 它们 的 图 片 比例 是 多 少 、 标 题 和 内 容 字 号 的 差异 、 有 哪些 现在 流行 的 功 
能 ( 例如 视频 直播 功能 就 是 近 两 年 才 植 入 到 资讯 类 App 的 ) 。 除 了 通过 对 比 线 上 优秀 
应 用 测试 界面 中 存在 哪些 不 足 ， 还 要 了 解 同类 App 设计 趋势 ， 这 样 才能 明确 改版 的 方 
向 和 目的 。 


重点 : 竞 品 分 析 可 以 为 我 们 提供 改版 思路 和 设计 素材 ， 竞 品 本 身 就 是 很 好 的 参考 。 


整理 界面 模块 的 主 次 关系 


接 下 来 我 们 要 对 测试 界面 的 布局 模块 进行 主 次 排序 。 这 一 步 很 重要 ， 因 为 相同 的 模块 摆 放 
到 不 同 的 位 置 其 设计 差别 是 很 大 的 ， 我 把 自如 的 页 面 做 了 些 变化 当 案例 ， 同 样 是 “租房 情 
报 局 ”模块 ， 放 在 页 面 头 屏 和 末 屏 的 展示 就 是 截然 不 同 的 。 当 然 如 果 测 试 界 面 的 主 次 关系 
本 身 就 很 明确 ， 则 不 需要 强行 变动 。 


二 T4504 To ee 中国 有 动人 下 于 5.04 Me 
ZIODm 自 四 yz. 厅 Q ef [a 


我 要 租房 房屋 避 泛 


自如 客 故事 


三 里 屯 麦 当 劳 女孩 
儿 ， 房 间 里 有 一 面 照 
片 墙 


就是 唯一 的 家 


上 | 二 e: Pi 是 自 找 


还 有 一 种 情况 ， 就 是 极其 不 重要 的 模块 该 怎么 办 呢 ? 我 们 可 以 将 其 进行 弱化 ， 选 择 隐藏 到 
下 拉 菜 单 或 弹 窗 中 ， 但 不 可 以 随意 去 掉 ， 确 保 改 版 后 的 界面 不 会 为 用 户 带 来 过 大 的 学 习 成 
本 ， 如 下 图 所 示 : 


| 可 和 到 省 自己 扫 钱 租 的 房子， 
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推荐 商城 。 游戏 。 音乐 。 电影 推荐 商城。 游 M 更 多 


左 侧 测试 界面 中 的 分 类 为 5 个 ， 如 果 就 用 户 点 击 体验 和 界面 效果 而 言 ， 摆 放 4 个 刚好 。 如 果 
起 过 了 该 怎么 解决 呢 ? 不 要 直接 去 掉 原 有 分 类 ， 可 以 增加 一 个 “更 多 ”选项 把 其 他 的 分 类 
隐藏 掉 。 


规范 界面 内 容 


1. 字体 的 规范 性 
我 们 需要 对 面试 题 中 的 字体 、 字 号 和 颜色 进行 统一 归 类 ， 如 下 图 所 示 : 


主 标题 在 这 里 主 标题 在 这 里 
副 祭 题 在 这 里 不 需要 很 明显 明 副标题 在 这 里 不 需要 很 明 
明 显明 明 


如 果 测 试 界面 中 的 常规 字号 过 多 ， 用 户 在 阅读 时 会 感到 很 乱 ， 同 时 主 次 差异 变化 也 不 大 ， 
所 以 我 们 需要 整理 测试 界面 的 字号 大 小 。 
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主 标题 在 这 里 主 标题 在 这 里 
副标题 在 这 里 不 需要 很 明显 副标题 在 这 副标题 在 这 里 不 需要 很 明显 副标题 在 这 


此 外 也 要 注意 文字 的 层级 问题 ， 标 题 、 内 容 、 不 重要 文字 、 特 殊 文 字 等 要 规范 化 ， 该 强调 
的 要 进行 强调 ， 该 弱化 的 也 绝 不 含糊 ( 可 以 参考 本 书 关于 格式 塔 原理 的 解读 ) ， 合 理 优 化 
用 户 阅 读 文字 时 的 体验 。 


2. 风格 的 一 致 性 


风格 一 致 是 一 个 可 大 可 小 的 问题 ， 大 到 涉及 整个 页 面 的 统一 性 ， 如 页 面 整体 风格 为 圆 角 弥 
漫 效果 或 者 是 直角 扁平 化 ， 不 要 一 个 页 面 内 有 多 种 风格 的 元 素 出 现 。 


小 到 一 个 图 标 或 一 个 控件 样式 的 统一 ， 例 如 页 面 中 图 标 用 的 是 线性 图 标 ( 线性 图 标 需 要 注 
意 每 个 图 标 用 线 的 粗细 是 否 一 致 ) 还 是 面 性 图 标 ( 实心 图 标 需要 注意 都 是 纯色 图 标 还 是 渐 
变 图 标 ) 等 。 额 外 提 到 一 点 就 是 图 标的 认 知性 ， 一 定 要 设计 简单 易 懂 的 图 标 ， 可 以 减少 用 
户 对 图 标的 学 习 成 本 。 
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oooeo 9ogoo0 


二 手书 。 新书 程 书 电子 书 。 书店 从 等 商城 游 对 杂志 社 


3. 颜色 的 统一 

明确 App 的 主 色 ， 如 淘宝 logo 为 杰 色 ， 界 面 的 主 色 则 为 杰 色 ; 京东 logo 为 红色 ， 则 界 
面 主 色 为 红色 。 我 们 在 对 测试 界面 进行 改版 时 ， 需 要 先 了 解 品牌 颜色 ， 再 根据 品牌 色 去 选 
择 对 应 的 App 主 色 ， 颜 色 最 好 不 要 变化 过 大 ， 影 响 用 户 对 App 的 品牌 认 知 。 


一 一 一 | 国 | 三 ES 


小 范围 改版 


对 于 改版 面试 题 可 能 很 多 同学 认为 改 得 面目 全 非 才 好 ， 其 实 不 然 。 真 正 的 改版 设计 是 要 有 
真实 的 依据 ， 如 果 是 更 改线 上 稿 的 设计 ， 最 好 慎重 更 改 ， 有 些 模 块 的 用 户 体验 本 身 就 是 极 
佳 的 ， 不 需要 做 太 多 的 改动 ， 只 要 把 其 按 自己 的 风格 进行 规范 即 可 。 举 个 例子 ， 资 讯 类 
App 首页 目前 通常 都 是 以 列表 的 形式 展示 ， 所 以 我 们 只 要 调整 图 片 和 文字 所 占 页 面 的 比例 
即 可 。 


改版 后 改版 前 


第 4 章 工作 困惑 


改版 说 明 


通常 改版 后 会 以 邮件 的 形式 发 送 回 去 ， 如 果 没 有 明确 的 改版 说 明 ， 对 方 可 能 会 觉得 我 们 仅 
仅 是 为 了 视觉 和 个 人 偏好 而 更 改 ， 降 低 了 改版 后 的 可 用 性 。 所 以 在 改版 后 ， 一 定 要 对 每 一 
处 更 改进 行 说 明 标注 ， 描 述 出 自己 的 设计 理念 和 思路 ， 这 样 可 以 更 加 有 效 说 服 看 稿 人 。 总 
之 ， 改 版 设计 不 可 以 只 是 凭 感觉 ， 要 做 到 有 理 有 据 才 可 以 。 


得 到 App 改 版 说 明 


模块 中 的 iconl 昌 版 
1. 得 整体 层次 上 过 于 单调 ， 没 有 突出 的 重点 。 
24cor 颜 色 饱和 度 过 低 ， 页 面 颜色 不 够 活路 。 


模块 中 的 iCON 新 版 

1 改变 ICON 的 样式 ， 增 加 层次 ， 强 化 细节 
统一 风格 。 

2. 提 升 :CON 颜 色 的 饱和 度 ， 提 高 功能 噬 光 度 。 


得 到 改版 练习 


集思广益 


如 果 自 己 不 能 确定 最 终 的 改版 是 否 成 功 ， 可 以 把 改版 后 的 方案 和 原 图 发 给 你 身边 的 朋友 。 
这 里 可 以 分 为 两 部 分 群体 : 专业 人 士 和 非 专业 人 士 。 专 业 人 士 可 以 很 好 地 提供 对 界面 设计 
上 的 建议 ， 提 高 页 面 质量 。 非 专业 人 士 更 像 是 你 的 用 户 群体 ， 没 有 专业 知识 的 偏见 ， 可 以 
仅仅 凭借 自己 的 体验 做 出 判断 ， 帮 助 你 检查 更 改 后 的 部 分 是 否 和 更 改 初衷 相 吻 合 。 


总 结 


互联 网 产品 的 节奏 特点 就 像 小 步 快 跑 ， 需 要 不 断 迭 代 优 化 ， 因 此 产品 改版 是 家 常 便 饭 。 通 
常 的 改版 只 要 做 好 两 件 事 即 可 : 发 现 问题 、 解 决 问题 。 如 果 你 的 改版 可 以 解决 目前 App 
存在 的 问题 ， 你 的 改版 就 是 成 功 的 。 所 以 ， 明 确 测试 页 面 存在 的 问题 才 是 大 前 提 ， 切 勿 急 
于 求 成 。 
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由 于 本 书 中 我 们 以 一 个 新 手 设计 师 的 视角 进行 论述 ， 存 在 种 种 局 限 ， 书 中 还 有 诸多 不 足 ， 
还 请 读者 朋友 予以 指正 。 


